vue环境的搭建

一、首先要安装nodejs :

别去官网下,慢的要死,这是国内的什么版本都有。地址

这是我下载的。

然后就傻瓜式安装。

验证是否安装成功

二、node.js的环境变量的新建。  //我安装的路径是D:\developTools\nodejs

其实安装完node,就自动在path里增加环境变量,但是为了以后的本地部署项目,我们需要找到node.js的安装根目录,在当中新建“node_global”和"node_cache"两个文件夹。

1 启动cmd依次执行以下两条命令

npm config set prefix "D:\developTools\nodejs\node_global"
npm config set cache "D:\developTools\nodejs\node_cache"

 2、设置环境变量:

说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径
a)新增系统变量NODE_PATH:把变量值设置成D:\developTools\nodejs(这样就可以把后面全局安装的装到global里并且可以直接用命令使用。)
b)修改用户变量PATH:选中PATH,点击编辑,把%NODE_PATH%\node_global\bin;加到前面

三、安装淘宝的npm镜像
1、命令

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

2、验证命令

npm config get registry

如果返回https://registry.npm.taobao.org,说明镜像配置成功。
3、安装yarn
输入:

npm install -g yarn

修改安装路径和缓存:

yarn config  set global-folder "D:\developTools\nodejs\node_global"
yarn config set cache-folder "D:\developTools\nodejs\node_cache"

再配置下源:

yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass -g
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ -g
yarn config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver/ -g

即可安装yarn镜像,以后再用到npm的地方直接用yarn来代替就好了。

四、安装全局vue-cli脚手架

yarn global add @vue/cli

等待安装好了,在dos命令敲 vue -V 就可看到vue版本了

使用vue-cli创建模板项目

vue init webpack vue_demo

解释上面命令
webpack是最简单的vue一个模板
vue_demo是项目名称

接下来根据提示输入工程的信息

vue-router需要安装,新手可以选择不安装ESLint和所有测试工具,一下子学太多容易从入门到放弃

1 ? Project name vue_demo
2 ? Project description A Vue.js project
3 ? Author chiang
4 ? Vue build standalone
5 ? Install vue-router? Yes
6 ? Use ESLint to lint your code? No
7 ? Set up unit tests No
8 ? Setup e2e tests with Nightwatch? No
9 ? Should we run `npm install` for you after the project has been created? (recommended) npm

 然后我们进入这个项目所在的地址,依次命令如下:

cd vue_demo
yarn install
yarn run dev(或者yarn start;npm run dev;npm start;)

 

posted @ 2018-11-10 22:53  Java偷走了我的微笑  阅读(362)  评论(0编辑  收藏  举报