安装参考下面网址：vuecli的官网
https://cli.vuejs.org/zh/guide/installation.html
安装完之后，输入命令：
vue init <template-name> <project-name>init：表示我要用vue-cli来初始化项目
<template-name>：表示模板名称，vue-cli官方为我们提供了5种模板，
-
webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
-
webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
-
browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
-
browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境
我这里使用的命令是：
vue init webpack test之后会在指定文件夹生成文件如下：
编译完运行结果如下：
代码结构解析：
有一个index.html的文件如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>test</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>看不出任何不一样的，还有一个main.js
如下：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
先来分析这个main.js吧
import Vue from 'vue';===》完整写法
import Vue from "../node_modules/vue/dist/vue.js";
import App from './App'===》完整写法
import App from './App.vue';
import router from './router'===》完整写法
这个不是vue的规定而是node加载模块的方式,当require('./router')(import会被转为require),node是这样的寻找目标的:
1.首先寻找目录下有没有router.js或者router.node,如果有就导入
2.如果没有看是否有router目录,如果没有就require失败,抛出异常"Cannot find module './router'"
3.如果有router目录会在其下寻找package.json文件,如果有则按照package的配置来导入
4.如果没有package.json,看是否有index.js或者index.node,如果有就导入没有就失败
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})el: '#app',表示关联的元素ID，就是index中定义的那个
components: { App },表示注册一个名称为App的组件
template: '<App/>'
router===》表示把路由注入到这个vue的实例
表示将App的组件插入替换掉index里面的ID为app的元素
=================》下面开始进入App.vue了，该轮到他上场了。
<script>
export default {
name: 'App'
}
</script>===》
在一个模块中，export default 只允许向外暴露一次
在一个模块中，可以同时使用export default 和export 向外暴露成员
export default 向外暴露的成员，可以使用任意变量来接收
我试一下把这一段注释掉，看看。。
重新打包后，还是可以运行，可见这一段其实没有运行。
再看一下style
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>为什么写个#app 完全看不懂。。。
*********************************改装一下 写了一个简单的路由切换********************
在app.vue里面增加一个列表
<ul>
<li><router-link to="/">Hello页面</router-link></li>
<li><router-link to="/myfirst">myfirst页面</router-link></li>
</ul>接下来，在route里面修改，增加一个vue组件
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import MyFirst from '@/components/myfirst.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/myfirst',
name: 'myfirst',
component: MyFirst
}
]
})再写一个myfirst的vue组件
<template>
<div>
<h1>'我的第一个vue'</h1>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>然后看下效果
点击切换，就变成了如下界面了。
**************************************20200923**********************************
由于vue的更新，现在创建项目发生了一些变化
第一步：安装cli
npm install -g @vue/cli第二步：创建项目，如果在windows平台的话，记得用vue.cmd
vue.cmd create onepicture
扫一扫
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
