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;)