vue脚手架安装

1、全局安装

vue脚手架安装_第1张图片

npm install vue-cli -g

2、初始化项目

vue脚手架安装_第2张图片
vue脚手架安装_第3张图片

vue init模板名 项目名称

3、构建项目--------命令npm run build

4、vue项目开发

==================================================================

《附加》

vue脚手架目录结构:

build  webpack配置和node环境搭建

config开发和线上环境配置,包括路径,端口号等

src开发目录:

assets:存入项目中的静态资源 例如:图片,字体图标,svg图等

components:存放项目中组件

router:存放路由文件

App.vue项目的入口组件

main.js项目入口js

static:存入静态资源目录  例如:jquery,reset.css,bootstrap.css等

index.html项目首页

修改端口号:

在Config文件夹index.js文件port:端口号

vue脚手架安装_第4张图片

列出官方模板:vue list一共6个模板

Main.js里面new一个vue的写法:

第一种:

new Vue({

el:”#app”,

router,

tempalte:””,

component:{App}

})

第二种:

new Vue({

el:”#app”,

router,

render:h=>h(App)

})

第三种:

new Vue({

render:h=>h(App)

}).$mount(“#App”)

你可能感兴趣的:(vue脚手架安装)