一、Vue CLI app开发定制公司脚手架介绍及安装
1、app开发定制公司初始化脚手架
1、说明
- Vue脚手架是Vueapp开发定制公司官方提供的标准化开发工具（开发平台）
2、具体步骤
-
（仅第一次执行）全局安装@vue/cli
-
npm install -g @vue/cli- 1
-
-
切换到要创建项目的目录，使用命令创建项目（xxx为项目名）
-
vue create xxx- 1
-
-
启动项目
-
npm run serve- 1
-
备注：
如果出现下载缓慢，配置（最好在进行第一步之前就跑这个命令）
npm config set registry https://registry.npm.taobao.org
- 1
隐藏了所有webpack相关配置，如果想查看webpack配置，可执行此命令
vue inspect > output.js
- 1
3、运行效果图
2、脚手架文件结构
3、主要文件分析
1、main.js
/* 该文件是整个项目的入口文件*/// 引入Vueimport Vue from 'vue'// 引入App组件，它是所有组件的父组件import App from './App.vue'// 关闭Vue的生产提示Vue.config.productionTip = false// 创建Vue实例对象---vmnew Vue({ // 将App组件放入容器中（可点代码块下方链接进入详解，此处不过多赘述） render: h => h(App),}).$mount('#app') // el: '#app'- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
2、index.html
<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8"> <!-- （没啥用，IE不配！）针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 开启移动端的理想视口，巴拉巴拉一大堆... --> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <!-- 配置页签图标（规避路径问题，使用<%= BASE_URL %>指向public文件夹）--> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- 配置网页标题（插件到package.json文件获取name）--> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <!-- 当浏览器不支持js时noscript中的元素就会被渲染 --> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <!-- 容器 --> <div id="app"></div> <!-- built files will be auto injected --> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
4、.vue文件替换成上一节的内容
1、App.vue修改
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <School/> <Student/> </div></template><script>import School from './components/School'import Student from './components/Student'export default { name: 'App', components: { School, Student }}</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
2、components/School.vue
<template> <div class="demo"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">点我提示学校名</button> </div></template><script>export default { name:'School', data(){ return { name: '沈工大', address: '沈阳' } }, methods: { showName(){ alert(this.name) } },}</script><style>.demo{ background-color: orange;}</style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
3、components/Student.vue
<template> <div> <h2>学生姓名：{{name}}</h2> <h2>学生年龄：{{age}}</h2> </div></template><script>export default { name:'Student', data(){ return { name: 'Mr.Wang', age: 18 } }}</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
5、启动项目并打开页面
由于日常开发使用 npm run dev 命令启动习惯了，故个人在package.json追加一条指令
“dev”: “vue-cli-service serve”
这样我就依然可以快乐的使用 npm run dev 启动了~