基于vue脚手架初始化项目

作者:日期:2018-01-21 12:05:59 点击:209

安装vue-cli

npm install vue-cli -g

初始化webpack

vue init webpack 项目名字

Alt text

在初始化后的这些东西中一些参数:

1.修改端口号

Alt text

2.引入路径配置的快捷键@

Alt text

3.配置的一些快捷方式运行

Alt text

4.我们平常写的webpack.config.js在这里,也就是我们默认打包的也是靠这个文件,要修改要打包的路径是在其 entry中修改路径或文件

Alt text

我们把不用的东西剔除掉:

  • 1.把helloworld.vue 删除
  • 2.router文件夹中 对helloworld.vue的引用删除,routes中的配置删除成一个空数组
  • 3.把App.vue中的<div id=”#app”></div>中的内容删除,style样式删除,然后在div中写入”hello”
  • 4.npm run dev 运行 打开8080地址得到:

Alt text

文件夹结构:

Alt text

在阿里巴巴图标网获取想要的图标:

  • 1.找到要用的图标加入购物车,给项目起名->确定
  • 2 Alt text
  • 3 Alt text
  • 4 .在html中引入
    • Alt text

上一篇: 深入理解Virtual DOM 算法

下一篇: 浅读vue的生命周期