天天看点

用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,是设置输出路径的。把"/"改成"./",确保本地能够查看打包后的页面