vue-cli構建vue項目(搭建框架)

vue-cli構建vue項目vue

參考資料:Vue2.0 新手徹底填坑攻略—從環境搭建到發佈node

1.Node.js安裝(npm)webpack

  下載地址: https://nodejs.org/en/download/ 或  http://nodejs.cn/download/git

 

  1. 安裝vue-cli

npm install -g vue-cliweb

cnpm install vue-cli -g(首選)vue-router

    安裝vue-cli的前提是你已經安裝了npm,安裝npm你能夠直接下載node的安裝包進行安裝。你能夠命令行工具裏輸入npm -v  檢測你是否安裝了npm和版本狀況。出現版本號說明你已經安裝了npm和node,我這裏的npm版本爲3.10.10。若是該命令不能夠使用,須要安裝node軟件包,根據你的系統版本選擇下載安裝就能夠了。npm沒有問題,接下來咱們能夠用npm 命令安裝vue-cli了,在命令行輸入下面的命令: npm install vue-cli -gvue-cli

    -g :表明全局安裝。若是你安裝時報錯,通常是網絡問題,你能夠嘗試用cnpm install vue-cli -g來進行安裝。安裝完成後,能夠用vue -V來進行查看 vue-cli的版本號。注意這裏的V是大寫的。我這裏版本號是2.8.1npm

 

  1. 使用vue-cli初始化項目

咱們用vue init命令來初始化項目,具體看一下這條命令的使用方法。json

$ vue init <template-name> <project-name>瀏覽器

 

init:表示我要用vue-cli來初始化項目

<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>:標識項目名稱,這個你能夠根據本身的項目來起名字。

在實際開發中,通常咱們都會使用webpack這個模板,那咱們這裏也安裝這個模板,在命令行輸入如下命令:

vue init webpack vuecliTest

 

輸入命令後,會詢問咱們幾個簡單的選項,咱們根據本身的須要進行填寫就能夠了。

Project name :項目名稱 ,若是不須要更改直接回車就能夠了。注意:這裏不能使用大寫,因此我把名稱改爲了vueclitest

    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。

 

命令行出現上面的文字,說明咱們已經初始化好了第一步。命令行提示咱們如今能夠做的三件事情。

1cd vuecliTest  進入咱們的vue項目目錄。

2npm install  安裝咱們的項目依賴包,也就是安裝package.json裏的包,若是你網速很差,你也能夠使用cnpm來安裝。

3npm run dev 開發模式下運行咱們的程序。給咱們自動構建了開發用的服務器環境和在瀏覽器中打開,並實時監視咱們的代碼更改,即時呈現給咱們。

相關文章
相關標籤/搜索