用腳手架搭建vue項目


1.這里用npm安裝,即node package manager(為了清楚原因,我就這樣理解了,node包管理器),先安裝node,node安裝可以上node官網下載

   https://nodejs.org/en/

安裝好后,打開cmd,輸入npm -v,查看安裝版本,當出現版本號,則說明安裝成功。

查看npm,即npm -v,出現版本號則說明安裝成功。

2.node安裝成功后,安裝腳手架vue cli,輸入npm install vue-cli -g ;g表示global全局安裝,安裝完成后,輸入vue -V查看是否下載成功,出現版本號則說明安裝成功

3.腳手架已經全局安裝好了,那么下面我們就可以利用腳手架搭建一個項目了,首先在你需要搭建項目的目錄中新建一個文件夾,在文件夾下面打開命令窗口,在此文件夾內用vue初始化一個項目。

輸入

     vue init webpack myproject

語法

    vue init <template-name> <project-name>,

<template-name>:表示模板名稱,vue-cli官方為我們提供了5種模板,
                              webpack-一個全面的webpack+vue-loader的模板,功能包括熱加載,linting,檢測和CSS擴展。
                              webpack-simple-一個簡單webpack+vue-loader的模板,不包含其他功能,讓你快速的搭建vue的開發環境。
                             browserify-一個全面的Browserify+vueify 的模板,功能包括熱加載,linting,單元檢測。
                             browserify-simple-一個簡單Browserify+vueify的模板,不包含其他功能,讓你快速的搭建vue的開發環境。
                             simple-一個最簡單的單頁應用模板。
<project-name>:標識項目名稱,這個你可以根據自己的項目來起名字。

 

在搭建項目中會有幾個問題,需要配置一下

Project name :項目名稱 注意:這里不能使用大寫
Project description:項目描述,默認為A Vue.js project,直接回車,不用編寫。
Author:作者,如果你有配置git的作者,他會讀取。
Install  vue-router? 是否安裝vue的路由插件,我們這里需要安裝,所以選擇Y
Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格。
我們這里不需要輸入n,如果你是大型團隊開發,最好是進行配置。
setup unit tests with  Karma + Mocha? 是否需要安裝單元測試工具
Karma+Mocha,我們這里不需要,所以輸入n。
Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行為
模擬測試,我們這里不需要,所以輸入n。

這里就選擇npm安裝 然后等待下載。。。。

實際開發中根據需要配置。

此刻項目已經搭建完成,可以看到我們的文件夾下面出現了很多文件了。下面根據他的提示讓我們進入我們的項目目錄,

 

然后啟動服務

    npm run dev

可以看到我們的項目已經啟動,地址為localhost:8080;打開地址,可以看到我們的項目已經啟動,運行。腳手架搭建vue項目搭建成功。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM