关于Vue脚手架
一、简介与安装
1 简介
Vue Cli 全称Vue command line interface(Vue命令行接口),俗称Vue脚手架, 是Vue官方提供的一个标准化开发工具(开发平台)。 可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】
参考官网:Vue CLI
最新版本是4.x,目前处于维护模式
其优点
1. 开箱即用,零配置 2. 内置babel等工具 3. 标准化的webpack配置
2 安装脚手架
第一步:验证npm指令是否存在
如果不存在,需要安装nodejs软件 官网:https://nodejs.org/en
第二步:更换镜像
npm config set registry https://registry.npmmirror.com or npm config set registry htps://registry.npm.taobao.org
扩展:
查看是否更换成功 : npm config get registry
删除最新镜像: npm config delete registry
第三步:安装脚手架(全局安装,只需要安装一次)
npm install -g @vue/cli # OR yarn global add @vue/cli
第四步:测试是否安装成功,检查一下版本号
vue -V 或者 vue --version
二、Vue项目创建与解析
1 如何创建Vue项目
第一步: 选择项目要创建的位置
比如在D:盘的一个文件夹projects里,那么cmd当前位置,需要切入该文件夹里
第二步:创建项目,想好自己的项目名称,比如first_vue
第三步: 按照提示来
错误总结
第一个:java_home
第二个:Error: spawn yarn ENOENT
打开 C盘 , 在 C盘 里,打开 users (用户名)的文件夹,然后在右侧搜索名为 .vuerc 的文件
{ "useTaobaoRegistry": false, "packageManager": "npm" }
2 项目相关指令
启动项目:npm run serve 暂停项目:Ctril+C
3 脚手架组织结构解析
脚手架文件结构:
.文件目录 ├── node_modules: vue库文件以及第三方库文件 ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── components: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ └── main.js: 入口文件 ├── .gitignore: git版本管制忽略的配置 ├── babel.config.js: babel的配置文件 ,可以自行参考babel官网 ├── package-lock.json: 包版本控制文件 ├── package.json: 应用包配置文件 └── README.md: 应用描述文件
三、入门案例
src/components/School1.vue
<template> <ul class="schoolUl"> <li>学校名称:{{schoolName1}}</li> <ul> <li>学校地址:{{schoolAddress1}}</li> </ul> </ul> </template> <script> export default { name:"School1", data(){ return { schoolName1:"吉林大学", schoolAddress1:"高新区前进大街2699号" } } } </script> <style> .schoolUl{ list-style-type:lower-alpha; } </style>
src/components/School2.vue
:
<template> <ul class="schoolUl"> <li>学校名称:{{schoolName2}}</li> <ul> <li>学校地址:{{schoolAddress2}}</li> </ul> </ul> </template> <script> export default { name:"School2", data(){ return { schoolName2:"北京大学", schoolAddress2:"海淀区颐和园路5号" } } } </script> <style> .schoolUl{ list-style-type:lower-alpha; } </style>
src\components\City.vue
:
<template>
<ul>
<li>{{cityName1}}
<School1></School1>
</li>
<li>{{cityName2}}
<School2></School2>
</li>
</ul>
</template><script>
import School1 from './School1.vue'
import School2 from './School2.vue';
export default {
name:"City",
data(){
return {
cityName1:"长春市",
cityName2:"北京市"
}
},
components:{
School1,
School2
}
}
</script><style>
</style>
src/App.vue
<template> <div id="app"> <City></City> </div> </template> <script> import City from './components/City.vue' export default { name: 'App', components: { City } } </script> <style> </style>
src/main.js
:
/* 该文件是整个项目的入口文件 */ // 引入Vue import Vue from 'vue' //引入App组件,他是所有组件的父组件 import App from './App.vue' //关闭vue的生产提示 //Vue.config.productionTip = false new Vue({ // 简写形式 将App组件放入容器中 render: h => h(App), // 完整形式 // render(createElement){ // return createElement(App) // } }).$mount('#app')
public/index.html
:
<!DOCTYPE html> <html lang=""> <head> <meta charset="UTF-8"> <!-- 针对IE浏览器的特殊配置,含义是让IE浏览器以最高渲染级别渲染页面 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 开启移动端的理想端口 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 配置页签图标 --> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- 配置网页标题 --> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <!-- 当浏览器不支持js时,里面的元素内容就被渲染 --> <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> </body> </html>
小贴士:常用快捷键:控制台打开的快捷键: ctrl+`
四、render函数
按照以前的写法,我们应该这样写:
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ el:"#app" template: `<App></App>` });
但是会报如下错误:
因为vue项目,默认引用的是node_modules\vue\dist\vue.runtime.esm.js
,在node_modules\vue\package.json
中明晃晃的写着:模块化语法时,引用的是该js
vue.js 与 vue.runtime.xxx.js的区别:
1. vue.js 是完整版的 Vue,包含:核心功能+模板解析器 2. vue.runtime.xxx.js 是运行版的 Vue,只包含核心功能,没有模板解析器
因为 vue.runtime.xxx.js 没有模板解析器,所以不能使用 template 配置项,需要使用 render函数接收到的createElement 函数去指定具体内容
render(a){ //console.log(typeof a) // Function, 该函数就是用来创建DOM节点的 return a('h1','你好,欢迎来到我的家'); } //简写: render:h => h(h1)
自己定义一个用于创建节点的函数,你应该会这么定义:
function createNode(nodeName,content){ var node = document.createElement(nodeName); var txt = document.createTextNode(content) node.appendChild(txt) return node; }
五、配置文件
vue.config.js
是一个可选的配置文件,如果项目的(和package.json
同级的)根目录中存在这个文件,那么它会被 @vue/cli-service
自动加载
使用vue.config.js
可以对脚手架进行个性化定制,详见配置 参考官网:配置参考 | Vue CLI
module.exports = { pages: { index: { // 入口 entry: 'src/index/main.js' } }, // 关闭语法检查 lintOnSave:false }
原文地址:https://blog.csdn.net/weixin_64513190/article/details/143026053
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!