Vue项目搭建

初次搭建,亦是一个学习的过程,有误的地方请多执教

1. 安装Node.js环境

官网下载:https://nodejs.org/en/download/
下载地址我都是默认地址没有改变,你们可以根据需要改变,记得安装地址就对了。
安装完输入node -vnpm -v查看是否安装成功
《Vue项目搭建》

安装node会自动安装npm所以不需要单独安装npm,但是国内使用npm会比较慢,有的时候依赖会安装失败,这会先去装一个淘宝镜像:http://npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 安装vue

cnpm install vue

注:这里推荐一个包管理器,nvm

安装完,输入vue -V(这里的V是大写)

《Vue项目搭建》

第一次运行的时候报错vue不是内部命令或外部命令,可能是因为npm版本太低了,需升级npm的版本

npm install -g npm

如果升级完还报错,就需要到环境配置修改下PATH,先找到vue.cmd文件的地址,然后配置到PATH里面

《Vue项目搭建》

修改完重新打开命令框再输入vue -V查看下版本

《Vue项目搭建》

这一步成功了,就可以创建一个你自己的项目了

3. 创建项目

vue init webpack 项目名称

然后出现这样一个对话框,默认就好了,因为暂不确定自己新搭的项目需要哪些插件,所以决定按默认的安装,后期需要再手动安装好了。这里回车,注意项目名不要有大写字母

《Vue项目搭建》

回车后慢慢等待,直到出现下图,就表面新项目已经创建成功了,这时候你只需要到项目根目录下运行npm install安装依赖,依赖安装完后运行npm run dev就可以启动项目了

《Vue项目搭建》

运行后页面能正常打开就对了

《Vue项目搭建》

4. 项目打包

npm run build

打包好的文件在src目录下

    原文作者:Leo刘
    原文地址: https://segmentfault.com/a/1190000020150346
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞