脚本宝典收集整理的这篇文章主要介绍了Vue CLI 脚手架,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
🍅程序员小王的博客:程序员小王的博客 🍅 欢迎点赞 👍 收藏 ⭐留言 📝 🍅 如有编辑错误联系作者,如果有比较好的文章欢迎分享给我,我会取其精华去其糟粕 🍅java自学的学习路线:java自学的学习路线
Vue.js 开发的标准工具
命令行界面(英语:command-line interface,缩写:CLI )是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。也有人称之为字符用户界面(CUI)
maven 项目构建工具
)vue-cli
搭建交互式的项目脚手架。@vue/cli
+ @vue/cli-service-global
快速开始零配置原型开发(不需要引入vue-min.js等)@vue/cli-service
),该依赖:
http://nodejs.cn/download/
windows系统: .msi 安装包(exe)指定安装位置 .zip(压缩包)直接解压缩指定目录
mac os 系统: .pkg 安装包格式自动配置环境变量 .tar.gz(压缩包)解压缩安装到指定名
1.windows系统: 计算上右键属性----> 高级属性 ---->环境变量 添加如下配置:
NODE_HOME= nodejs安装目录
PATH = xxxx;%NODE_HOME%
2.macos 系统 推荐使用.pkg安装直接配置node环境
启动cmd窗口
在任意位置 输入命令: node –v
展示node版本即可v14.0.0
在世界范围内维护的中心库,用于管理前端js文件
npm install axios 通过网络从中心库下载axios 没有版本时默认下载最新版本
npm install axios@x.x.x 通过网络从中心库下载axios指定版本
npm config set registry [https://registry.npm.taobao.org](https://registry.npm.taobao.org)
npm config get registry
#windows:
#1.设置缓存位置
npm config set cache "D:noderepositorynpm-cache"
#2.设置
npm config set prefix "D:noderepositorynpm_global"
#mac os:
npm config set cache "/Users/chenyannan/dev/nodereps"
npm config set prefix "/Users/chenyannan/dev/nodereps"
npm config ls
npm uninstall -g @vue/cli //卸载3.x版本脚手架
npm uninstall -g vue-cli //卸载2.x版本脚手架
https://cli.vuejs.org/zh/guide/
npm install -g vue-cli
vue init
path=…;D:noderepositorynpm_global
目的:便于后续使用vue cli相关命令
窗口中输入命令 :vue init
显示如上界面即可
vue init webpack 项目名
hello ------------->项目名
-build ------------->用来使用webpack打包使用build依赖 构建一些依赖文件
-config ------------->用来做整个项目配置目录 主要用来对 开发 测试 环境进行配置
-node_modules ------>用来管理项目中使用依赖
-src ------>用来书写vue的源代码[重点]
+assets ------>用来存放静态资源 [重点]
components ------>用来书写Vue组件 [重点]
router ------>用来配置项目中路由[重点]
App.vue ------>项目中根组件[重点]
main.js ------>项目中主入口[重点]
-static ------>其它静态
-.babelrc ------> 将es6语法转为es5运行
-.editorconfig ------> 项目编辑配置
-.gitignore ------> git版本控制忽略文件
-.postcssrc.js ------> 源码相关js
-index.html ------> 项目主页
-package.json ------> 类似与pom.xml 依赖管理 jquery 不建议手动修改
-package-lock.json ----> 对package.json加锁
-README.md ----> 项目说明文件
a、 切换到创建项目的根目录
b、 在项目根目录中执行命令 npm run dev
./当前目录
注意:在Vue cli 中一切皆组件
<template>
<div class="hello">
{{msg}}
<h1>这是我女朋友杨福君!</h1>
</div>
</template>
<script>
export default {
name: 'user',
data () {
return {
msg: '人物介绍'
}
}
}
</script>
import Vue from 'vue'
import Router from 'vue-router'
import user from '@/components/user'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/user',
name: 'User',
component: user
}
]
})
<template>
<div id="app">
<img width="600px" src="./assets/logo.jpg">
<router-link :to="{name:'User'}">展示用户信息</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
以上是脚本宝典为你收集整理的Vue CLI 脚手架全部内容,希望文章能够帮你解决Vue CLI 脚手架所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。