一、安装 nodejs 环境
https://nodejs.org/en/download/ 官网下载
检查版本:
点击 "开始"=>"运行"=>输入"cmd"
node -v //查看node版本
npm -v //查看npm版本
二、安装vue-cli
打开cmd,输入
npm install -g @vue/cli
三、创建项目
vue init webpack test //test为项目名称
“问答”模式
Project name //项目名称,默认是输入时的那个名称(test),想改的话直接输入修改,不改直接回车
Install vue-router //是否需要vue-router,默认选择使用
Use ESLint to lint your code //是否使用ESLint,默认选择使用
Setup unit tests with Karma + Moch? //是否安装单元测试,由于我们现在还没有单元测试,所以选择”N”
Setup e2e tests with Nightwatch //是否安装e2e测试,这里也同样选择的是”N”
注:这几个配置选择yes 或者 no 对于我们项目最大的影响就是,如果选择了yes 则生成的项目会自动有相关的配置,有一些loader我们就要配套下载。所以如果我们确定不用的话最好不要yes,要么下一步要下很多没有用的loader
四、目录结构说明
1.build——[webpack配置]
build文件主要是webpack的配置,主要启动文件是dev-server.js,当我们输入npm run dev首先启动的就是dev-server.js,它会去检查node及npm版本,加载配置文件,启动服务。
2.config——[vue项目配置]
config文件主要是项目相关配置,我们常用的就是当端口冲突时配置监听端口,打包输出路径及命名等
3.node_modules——[依赖包]
node_modules里面是项目依赖包,其中包括很多基础依赖,自己也可以根据需要安装其他依赖。
4.src——[项目核心文件]
4.1 index.html——[主页]
4.2 App.vue——[根组件]
4.3 main.js——[入口文件]
4.4 router——[路由配置]
五、下载依赖包
npm install
六、运行
npm run dev
七、总结
npm install -g @vue/cli //下载vue-cli脚手架
vue init webpack test //生成项目,形成基本结构
npm install //下载依赖包
npm run dev //运行