Vue 环境配置及项目初始化

1.安装nodejs https://nodejs.org/en/download/  ，配置一下淘宝镜像路径，以防止下面构建vue出错

参考这篇文章 https://blog.csdn.net/github_38313789/article/details/80625820

2.安装成功提示

3. 用vue-cli工具构建项目

4.按上面构建运行成功的样子

5.如果上面创建项目卡在下模板的地方按以下操作

打开cmd，输入命令  
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装Vue需要npm的版本大于3，所以我们先升级一下npm，输入命令
cnpm install cnpm -g
安装vue，输入命令
cnpm install vue
安装vue-cli，输入命令
cnpm install --global vue-cli
vue init webpack  projectName
cd "项目所在文件夹“
然后依次执行下面的命令
cnpm install
cnpm run dev

 

6、项目目录介绍

（1）

       build // 项目构建(webpack)相关代码 
　　build.js // 生产环境构建代码
　　check-versions.js // 检查node&npm等版本
　　dev-client.js // 热加载相关
　　dev-server.js // 构建本地服务器
　　utils.js // 构建配置公用工具
　　vue-loader.conf.js // vue加载器
　　webpack.base.conf.js // webpack基础环境配置
　　webpack.dev.conf.js // webpack开发环境配置
　　webpack.prod.conf.js // webpack生产环境配置
（2）

         config// 项目开发环境配置相关代码
　　dev.env.js // 开发环境变量
　　index.js //项目一些配置变量
　　prod.env.js // 生产环境变量
（3）

         node_modules// 项目依赖的模块
（4）

         src// 源码目录
　　assets// 资源目录  logo.png
　　components// vue公共组件   Hello.vue
　　router// 前端路由  index.js// 路由配置文件
　　App.vue// 页面入口文件（根组件）
　　main.js// 程序入口文件（入口js文件）
（5）

         static// 静态文件，比如一些图片，json数据等
　　.gitkeep
（6）

         剩余
　　.babelrc// ES6语法编译配置
　　.editorconfig// 定义代码格式
　　.gitignore// git上传需要忽略的文件格式
　　index.html// 入口页面
　　package.json// 项目基本信息
　　README.md// 项目说明