vue 全家桶 简解

---

一、准备工作

1. 安装node.js···最新版的node.js已经集成了npm包管理工具
2. 安装git···这一步也可以省略，我这里使用git是为了更方便的使用命令行进行npm命令行操作
3. 全局安装vue-cli
   npm install vue-cli -g

进行到这里准备工作就基本结束了，接下来就是使用vue-cli新建一个项目。

二、新建项目

1. 新建vue项目
   vue init webpack my-vue-demo
   接下来会依次给出一些项目提示配置，如下图
   新建vue项目.png

? Project name (my-vue-demo)  //项目名
? Project name my-vue-demo  //执行结果：项目名my-vue-demo
? Project description (A Vue.js project)  //项目描述
? Project description A Vue.js project  //执行结果：项目描述A Vue.js project
? Author (Cuiht <2639463818@qq.com>)  //作者
? Author Cuiht <2639463818@qq.com>  //执行结果：作者Cuiht
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n)  //是否安装Vue路由（单页面应用需要的模块）
? Install vue-router? Yes  //执行结果：是
? Use ESLint to lint your code? (Y/n) n  //是否启用eslint检测规则，这里个人建议选no
? Use ESLint to lint your code? No  //执行结果：否
? Set up unit tests (Y/n) n  //是否安装单元测试，这里个人建议选no
? Set up unit tests No  //执行结果：否
? Setup e2e tests with Nightwatch? (Y/n) n  //是否安装e2e测试 ，这里个人建议选no
? Setup e2e tests with Nightwatch? No  //执行结果：否
? Should we run `npm install` for you after the project has been created? (recommended)  
//是否直接安转依赖，这里个人建议选no，因为非常慢，我们可以在接下来的操作中自己安装
? Should we run `npm install` for you after the project has been created? (recommended) no//执行结果：否
   vue-cli · Generated "my-vue-demo".
# Project initialization finished!  //项目创建结束
# ========================
To get started:  //启动项目描述
  cd my-vue-demo  //进入项目文件夹
  npm install (or if using yarn: yarn)  //安装必要依赖
  npm run dev  //启动开发模式
Documentation can be found at https://vuejs-templates.github.io/webpack

进行到这里我们可以打开文件夹看一下，里面会有以下文件夹

vue项目基础文件结构.png

2. 安装依赖
   cd my-vue-demo//进入项目文件夹
   npm install (or if using yarn: yarn)//安装必要依赖
   在初始化的最后一步如果直接安装依赖了，可以跳过这步，安装时间可能会比较长，选用国内的镜像地址时间会短一点。
   安装成功后会多出一个node_modules文件夹，里面就是我们开发需要的依赖文件。
   

   node_modules.png

3. 运行项目
   npm run dev运行开发模式
   

   开发模式.png
   项目启动完成后，它会提示在哪个端口可以访问到项目，我的这个项目是在80端口运行。

4. 打包
   npm run build对项目进行打包，vue-cli中已经集成了webpack，可以直接打包。
   

   打包完成.png
   打包成功后会多出一个dist文件夹，我们只需要将这个文件夹放到服务器上，然后访问里面的index.html页面即可。
   dist.png

        这里需要注意的是，在开发过程中，我们把打包完的项目放到服务器上时，可能会出现访问不到相关津泰资源的问题，这时候我们需要修改相关配置，重新打包，具体操作会在以后的文章中详细说明。

        至此，关于vue全家桶的相关基础简介，就结束了，详细的相关技术会在以后不断更新。
        只要朝着一个方向努力，一切都会变得得心应手。--勃朗宁