vue（一）環境、安裝

各類資源

官方vue_cli

https://cli.vuejs.org/zh/guide/

博友資料

1.Vue.js——vue-router 60分鐘快速入門

2.Vue.js——60分鐘webpack項目模板快速入門

關於npm依賴的解釋

https://blog.csdn.net/weixin_33859231/article/details/88667087

http://www.javashuo.com/article/p-ghejctih-nq.html

如何升級npm版本

https://stackoverflow.com/questions/6237295/how-can-i-update-nodejs-and-npm-to-the-next-versions

 

1、在Ubuntu下部署Vue環境

參考：http://www.javashuo.com/article/p-xaezzinz-v.html

1.升級ubuntu包管理器

sudo apt update 

２．安裝nodejs　 (相似python或jdk,js的運行環境）

sudo apt install nodejs

３．安裝npm  (js包管理工具，相似pip)

sudo apt install npm

4.升級，且用國內cnpm代替npm，由於國外npm太慢

sudo npm install npm -g

sudo npm install cnpm -g 　　（特別慢）

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org　（一樣是安裝cnpm,制定阿里源，快不少）

 

４．安裝vue.js,能夠直接用cnpm安裝了

sudo cnpm install vue

5.vue-cli  命令行工具，也是腳手架，能夠快速構建，配合webpack模板使用

sudo cnmp install -g vue-cli

６．安裝webpack

$ sudo cnpm install webpack -g

 

安裝完vue cli後，能夠建立　vue-webpack-simple、vue-webpack　２中項目模板

 

建立vue程序，又簡單webpack模板和複雜模板的區分

 １．基於webpack模板建立項目（複雜模板）

建立一個基於 webpack 模板的

 $ vue init webpack myfirstvue　　

接下來一連串的默認就能夠

This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "myfirstvue".

   To get started:
   
     cd myfirstvue
     npm install
     npm run dev

 

$ cd myfirstvue     #進入生成的項目目錄

$ cnpm install       # 安裝依賴

$ cnpm run dev    # 運行項目

 

２．基於webpack-simple模板建立項目（簡單模板） 

lxg@lxg-opt:~/80vue/vue1$ vue init webpack-simple webpack_simple

? Project name webpack_simple
? Project description A Vue.js project
? Author 
? License MIT
? Use sass? No

   vue-cli · Generated "webpack_simple".

   To get started:
   
     cd webpack_simple
     npm install
     npm run dev

$cd webpack_simple
$cnpm install
$npm run dev

每建一個工程，都要cnpm install，下載大量的依賴，嘗試作過link，但出現不少莫名其妙的錯誤，仍是老老實實的按步驟建立

 

2、解決速度慢的問題

建立項目vue init webpack projectName時候，和淘寶鏡像不要緊的，由於vue-cli 用的是 npm 源，

因此只要設置 npm 源就好了，能夠提高建立速度：

npm config set registry https://registry.npm.taobao.org

 

3、windows上安裝vue

參考：　

http://www.javashuo.com/article/p-qtxtplht-nq.html

http://www.javashuo.com/article/p-rycjajct-nq.html

 

4、pycharm裏使用vue

１、首先，主機要安裝node.js, npm, vue_cli等工具，能夠參考前文。

２、在pycharm,在settins下Plugins中下載vue.js插件

３、新建項目，就能夠看到vue.js了

但個人機器（Ｕｂｕｎｔｕ16.4)環境有點問題，安裝過了ij-rpc-client，仍然報錯。

 

 

 

４．個人應對措施是按前文，使用命令行工具，vue init,  cnpm install 來建立項目

　　建立完項目後，用pycharm打開。

 拷貝一張別人的圖

 

 

 

５、項目打開後，是不能直接運行的。

兩種方法啓動vue項目
 -方法1.在Terminal下輸入npm run dev
 -方法2.run ---Edit Configurations----》點+  選npm-----》在script對應的框中寫：dev

 

 

 能夠運行了

 

 

 

5、程序說明

如下待繼續整理

node js的入口是 package.json

vue-cli 的入口是 main.js 、index.js、App.vue 或 app.vue 中的一個。你也能夠顯式地指定入口

 

6、npm與pip的區別

１. pip

pip是python的一個包管理工具，在經過python建立項目的時候，咱們有python虛擬環境的概念，若是咱們想在虛擬環境下安裝咱們須要的第三方包，那麼咱們首先要激活咱們的虛擬環境

source activate 名稱

而後在pip install
若是不激活虛擬環境，則默認安裝在python安裝目錄裏的site-packages目錄下

２ npm

npm是node.js提供的一個包管理工具，前端開發必知必會。經過npm init會給你建立一個package.json的包。
若是咱們想在當前工程項目下經過npm安裝咱們須要的第三方包，那麼須要咱們進入該工程目錄，而後執行npm install來安裝。

若是想安裝到全局，則須要npm install -g若是想安裝的時候也安裝依賴，則須要npm install --save