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