用vue构建项目笔记1(用vue脚手架创建项目)

         一开始只是看vue的api跟着熟悉vue，但是真正用在项目中，还是需要疯狂的查资料才能会做，需要一个积累的过程。

很多前辈说跟着vue官方文档就可以知道很多东西，但是我查到的api并不能让我直接用在项目中，还是需要查别人是怎么写的，而且总是查到一些自己项目中不能用的东西。

根据我现在的了解，vue其实有两种写法

         一种是每个单页面单独声明：

 
 

  
  var app = 
  
  new Vue({
 
 
 
 
  
  
  el: 
  
  '#app',
 
 
 
 
  
  
  data: {
 
 
 
 
    
  
  message: 
  
  'Hello Vue!'
 
 
 
 

  
    }
 
 
 
 

  
  })
 
 

这样思路比较简单，但是遇到复杂的需求就查不到这样格式的文章了，可能是我学艺不精吧。

         另一种就是构建vue脚手架。写法，思路上都有一些差别。但是完全构建一个项目再用webpack打包会很省事，脚手架都预先配置好了很多东西。

后面是我在学习，使用vue写项目时的一些认识和处理不同需求的知识点记录，以防自己以后忘掉，也好查询。

本章记录一下如何搭建vue脚手架（不详细，只是用到的命令）：

 1.下载node.js安装。

2、安装淘宝镜像，用cnpm装东西很省事，目前没被坑过（一下命令在cmd中完成）

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

3、安装vue脚手架

cnpm install -g vue-cli

4、创建一个vue项目，根据提示配置是否需要单元测试等

vue init webpack VueProject
5、进入项目安装依赖(用cd命令，进入项目文件夹)
cnpm install
6、启动项目进行开发
npm run dev
7、开发完成进行打包
npm run build
最后找到config/index.js中build的assetsPublicPath，是设置输出路径的。把"/"改成"./"，确保本地能够查看打包后的页面