使用 vue-cli 脚手架搭建Vue项目

安装 Nodejs

• 去官网下载最新版本，然后安装
• 安装完之后安装淘宝npm镜像(也可以安装镜像)

npm install -g cnpm --registry=https://registry.npm.taobao.org

全局安装 vue-cli

• 新建一个项目
  下面称之为 my-project
• 全局安装vue-­cli

npm install -g vue-cli

如果这里报permission错误的话，命令前面加上 sudo，然后输入密码就可以了，即

sudo npm install -g vue-cli

• 进入目录–初始化项目

vue init webpack my-project

或者

vue init webpack .   
// . 表示当前目录

• 安装依赖

npm install

• 启动项目

npm run dev

目录介绍

安装完后会生成以下目录，下面一一介绍

.
├── README.md
├── build                    # build 目录用于存放构建脚本，比如 webpack 配置文件
├── config                  # config 目录用于存放一些配置信息，比如配置打包后的 bundle 文件存放在哪里
├── index.html           # 首页
├── node_modules      # 项目依赖的模块
├── package.json       # 项目基本信息
├── src                       # 除了首页，其他的源代码都在 src 目录里
├── static                   # static 目录用于放置静态资源，比如 favicon.ico 文件等
├── .babelrc        # ES6语法编译配置
├── .editorconfig   #  定义代码格式
└── test                     # 单元测试等代码放在 test 目录里

---

src 目录

除了首页，其他的源代码都在 src 目录里。

├──  assets     # 资源目录
├──  components      # vue公共组件
├──  router       # 前端路由
├──  App.vue  #  页面入口文件（根组件）                 
└──  main.js  # 程序入口文件（入口js文件）

assets和static文件夹的区别

assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。例如，在 中，./logo.png是相对的资源路径，将由Webpack解析为模块依赖。

static 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。

任何放在 static/ 中文件需要以绝对路径的形式用：/static/[filename]。

在我们实际的开发中，总的来说：static放不会变动的文件 assets放可能会变动的文件。

---

build 目录

build 目录用于存放构建脚本，比如 webpack 配置文件。
build 里面的目录如下：

├──  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生产环境配置                  

---

config 目录

目录用于存放项目开发环境配置相关代码 ，比如配置打包后的 bundle 文件存放在哪里。

├──    dev.env.js   # 开发环境变量      
├──    index.js    # 项目一些配置变量          
└──    prod.env.js  # 生产环境变量

---