Vue项目环境搭建

安装node.js的运行环境 node.js下载地址

点击DOWNLOADS菜单栏

• LTS长期维护版本【开发环境中选择 更稳定】
• Current：最新版 选择相应机型类型 进行傻瓜式安装

cmd命令行：

-node -v：显示相应版本号 node安装成功
-npm  -v：显示相应版本号 查看npm包管理工具是否安装成功【node的包管理工具  在安装node时内部会自动安装npm包管理工具】

创建一个Vue项目

-npm install -g @vue/cli：全局安装vue-cli【安装之后 就可以在命令行中访问 vue 命令】
-vue --version：查看vue版本 测试脚手架安装后 可以访问vue了
-npm install -g @vue/cli-init
-cd Desktop：先切换到桌面
-vue init webpack travel：创建一个基于webpack模板的的新项目 到桌面的travel文件夹中

去掉vue 中的代码规范检测:在搭建vue脚手架时提示是否启用eslint检测的。 Use ESLint to lint your code? 写 no;

-cd Travel：进入travel文件夹 安装依赖
-npm install：一键安装node包【包含webpack包】
-npm run dev：帮助你进行自动化的打包 

项目运行在localhost：8080 输入网址即可看见Vue网页：说明Vue环境配好了

项目代码结构

README.md：项目的说明文件
package.json：依赖包 存放第三方模块依赖
package-lock.json：package的一个锁文件 帮助确定安装的第三方包版本 保证团队编程的统一
LICENSE：开源协议的说明
index.html：项目默认的首页模板文件
.postcssrc.js：对postcss的一个配置项
.gitignore：配置不想上传到线上的文件内容 里面的所提到的文件不会被提交到仓库之中
.esclintrc.js：配置代码的规范 检测代码是否写的标准
.eslintignore：里面的所提到的文件 不会受到esclintrc.js的代码规范的检测
.editorconfig：配置编辑器中的语法 统一编辑器的自动化的代码格式化
.babelrc：项目是vue单文件组件的写法 babelrc语法解析器进行语法上的转换 转换成浏览器可以编译执行的代码
static目录下：存放静态资源 静态图片 json数据
node_modules目录下：项目依赖的第三方的node包
src目录下：存放整个项目的源代码 【进行业务代码开发】

• main.js：项目的入口文件
• App.vue：项目最原始的根组件
• router/index.js：存放路由
• components文件夹：存放项目中要用到的小组件
• assets文件夹：存放项目中用到的图片类的资源

config文件夹：存放项目的配置文件

• index.js：存放基础的配置信息
• dev.env.js：开发环境的配置信息
• prod.env.js：线上环境的配置信息

build目录下：项目打包的 webpack配置的一些内容 vue-cli自动构建好的webpack的集合

• webpack.base.conf.js：基础的webpack配置项
• webpack.dev.conf.js：开发环境中的webpack配置项
• webpack.prod.conf.js：线上环境的webpack配置项