开发环境
Node.js | javascript运行环境 node>=6.0.0 |
npm | Node.js下的包管理器 npm>=3.0.0 |
webpack | Vue组件都是通过.vue组件无法被客户端浏览器所解析,需要被翻译打包成.js文件 webpack 3.6.0 |
vue-cli | 用来生成模板的Vue工程,脚手架工具 |
之前node,cnpm已经安装完成
继安装如下插件
安装webpack,(进入终端直接安装没进入指定目录) | cnpm install webpack -g |
安装vue脚手架,(进入终端直接安装没进入指定目录) | cnpm install vue_cli -g |
进入项目指定目录,根据模板创建项目 | Vue init webpack-simple 工程名字(不能用中文)(注意vue首字母大写) |
会有一些初始化设置,代码检测等插件暂且不安装 | 回车默认(可选择y/n) |
cd+项目目录,执行 | npm run install 在浏览器中查看(地址终端会有提示) |
项目目录文件说明
build | webpack配置相关,开发环境配置、生产环境配置 |
config | 配置了路径端口值等 |
node_modules | npm install 安装的依赖代码库 |
src | 存放源码,开发的代码都会放到这个目录下 |
static | 存放第三方静态资源的。其中的gitkeep文件,当这个目录为空也可以把这个目录提交到git仓库里 空目录会被.git忽略不会被提交到仓库中的 |
babelrc | 将es6通过babel编译成es5,在node_modules里面有相关的安装插件 |
editorconfig | 编译器的配置 |
eslintignore | 忽略语法检查的目的文件,会忽略build,config文件做语法检查 |
eslintrc.js | eslint的配置文件 |
gitignore | git忽略到的文件和目录不会被提交到代码库中 |
index.html | 入口文件,编译好的文件会被自动插入到这里面 |
package.json | 项目配置文件 |
readme.md | 项目描述文件 |
main.js | 是入口文件,主要作用是初始化vue实例,并使用我们需要的插件(项目核心文件,vue的实例初始化) |
App.vue | 是根组件,所有页面都是在此页面下进行切换的,可以理解为所有组件都是App.vue的子组件,可以把头部,底部及每个页面都出现的内容放在App.vue里面。(顶层父组件) |
asset | 放置静态资源,包括公共的css,js,等文件及其他资源类文件。强调公共css文件是因为在组件的css标签里加入scoped标记,将其作用范围限定在此组件以及调用它的父组件中,避免污染全局样式 |