Vue-cli搭建项目

第一步 vue-cli

vue-cli安装非常简单,它为我们节省了很多webpack配置文件。
vue-cli的使用请查看

# 安装 vue-cli
npm install -g vue-cli

# 初始化 webpack 项目
vue init webpack my-project
cd my-project
# npm可能出现访问速度极慢的情况,推荐使用cnpm
npm install
#安装 vux 发版请使用 npm install vux@next
npm install vux
#安装less-loader, vuejs-templates模板默认不安装less less-loader
npm install less less-loader --save-dev
# 调试
npm run dev

看一下生成的目录文件:

build文件夹是npm run build之后构建的build文件,以及一些配置文件,
config文件夹放的是一些配置文件。
static故名思义是静态文件。
index.html是主页面,当然这里面只有一个div节点名为app。
最重要的是src文件夹:
这里面的几个文件夹assets 存放静态文件,比如图片等,说明一下,vue一般是把css写在每个vue中的
components是组件,一个页面可以理解为由很多很多的组件组成的。
app.vue就是主要的页面,可以理解为把这些组件组合起来的文件。
main.js其实是用于组合app.vue 和index.html
ok 我们npm run dev来看看。

你可能感兴趣的:(Vue-cli搭建项目)