vue 小白教程（一）持续更新

vue项目从无到有

一个前端菜鸟的笔记

初始化（创建）基于vue的项目

init：初始化（创建）基于vue的项目

vue init webpack hello：基于webpack来构建一个名称为hello的vue项目

vue-cli是一个交互式命令行，通过vue命令构建项目会需要我们填写一些项目的信息：

Project Name：要创建的项目名称（该命令会生产一个package.json文件，文件中的name选项就是这个ProjectName，
默认为当前创建的项目目录名称，也可以自行制定（但是需要符合package.json中name命名规则，不要出现大写字母，
空格，下划线，可以使用 - ）
Project Description：项目简介，也会出现在package.json文件中,可选

Author：作者，可选

下一步直接回车

Install vue-router：是否安装vue路由组件，做项目的话一定要安装

Use ESLint to lint your code：是否需要使用ESLint模块进行代码检测
//个人开发建议关闭，公司开发必须开启，代码检测会让你的代码至少看起来从格式上整洁

Setup unit tests with Karma + Mocha?：是否安装测试（单元测试）

Setup e2e tests with Nightwatch?：是否安装端到端的测试

通过vue-cli完成配置以后，项目需要安装的依赖包在vue-cli工具自动生成的package.json文件中有说明：

一般需要的安装包需要哪个就安装哪个，国内使用npm需安装淘宝镜像

项目使用模块具体安装过程： cnpm install 安装包 --save  例如： cnpm install axios --save

在package.json文件中在devDependencies就可看到安装包的版本号

dependencies：项目中实际需要使用到的依赖包
devDependencies：项目开发过程中需要使用的一些工具包，不是项目实际线上代码的一部分

项目结构

• build目录：构建项目命令所需要使用到的一些脚本文件和配置文件

• config目录：在vue-cli中会自动安装一个小型的express搭建的热重载web服务器，config里面就是关于这个服务器的相关配置

• dist目录：项目编译构建上线后的存放目录

• node_modules目录：项目依赖包存放目录

• src目录：项目源代码存放目录

• static目录：静态资源存放目录

在项目开发过程中，我们的大部分任务是在src这个目录下完成的

• main.js：vue脚手架为我们自动生成的项目中设置的入口文件，在该入口文件中，做了一些项目初始化的工作
• 引入 Vue
• 引入必要的组件
• 创建Vue实例

运行

所需要的安装依赖包安装完成以后，就可以启动项目，运行

npm run dev: 开启一个测试开发环境
npm run build : 构建项目，把项目进行打包，我们可以把项目打包后的文件上传到服务器

rt.js/