安装vue-cli
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。
安装cli：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
创建vue工程:
vue create my-project
# OR
vue ui
创建vue+node项目
1、首先打开cmd命令行，查看node.js和npm是否已经安装，新版的node.js默认安装npm的
查看是否有安装
对于node不了解的可以看下我之前总结的node.js入门如果对您有帮助欢迎点赞~
[NODE.JS包浆记]https://www.jianshu.com/c/bd95bc394f5b
2、使用命令全局安装vue-cli脚手架
npm install -g vue-cli注：因为跟着学习的视频以及大多数教程都是用的旧版的vue-cli所以如果你跟我一样是前端菜鸟也是在网上自学的话差不多也是看到的这个命令，但是官网其实已经更新为vue-cli-3了，这是官网对于旧版换新颜的说明：
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
新的脚手架需要node.js 8.9以上的版本，因为包名换了所以安装命令应该改为
npm install -g @vue/cli
安装完成后可以用vue –version 来查看（我安装的是旧版）
3、然后就可以开始创建一个vue项目啦
在指定目录下执行创建项目命令：
vue create hello-world （hello-world为项目名称）或者vue ui（图形化创建）执行后会需要选择一些配置
图片来自互联网
4、然后cd进入到项目文件夹内，执行
npm install会发现项目结构里，多了一个node_modules文件夹（该文件里的内容就是之前安装的依赖）以上步骤完成后就能在目录下找到以下工程文件夹啦，目录如下
工程目录结构
创建出来的工程目录
- build 文件夹下放置的是一些项目的webpack配置文件
- config 文件夹下是一些开发环境和线上环境的配置文件
- node_modules 文件夹放置的是项目的依赖文件
- src 放置的是源代码
- static 文件夹放置的是静态资源
- test 为测试用例文件夹
- .babelrc 文件为针对babel的编译文件
- .editorconfig，浏览器配置文件
- .gitignore git检测工具
这些文件都不需要修改，默认即可 - Index.html，项目的网页入口
在项目开发的过程中主要在src下编写代码
然后我们执行npm run dev命令，即可启动项目
一顿疯狂运行后得到：
启动成功
此时我们便可访问http://localhost:8080得到初始页面啦：
项目源码分析
Html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue_test</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
这就是入口的index文件了，可以看到有一个id为app的div我们去src看源码
// 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'//相当于引入./router/index，index可以省略，其他名字则不可以
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },//引入了src目录下的app.vue组件，es6写法，等同于components:{App:App},当键值相等可以只写一个
template: '<App/>'
})
Src中的main.js文件，绑定了index里的app接入了app.vue局部组件
App.vue：
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>//这里用的就是router的页面啦
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<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>
这是一个完全封装的vue组件，包括<template>模板，<js>代码和<css>样式
Img 引入的就是我们在网页上看到的vue的loge图标，<router-view>标签渲染引入了下面的链接，我们进入router中的index.js:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
调用了HelloWorld组件，进入到componets目录下的HelloWorld.vue组件
这里就是logo下的超链接啦
将之前的例子组件移植过来
下面我们将之前制作的组件移植过来
根目录index.html：
<div id='test'></div>
创建一个div盒子，id为test
src/main.js 中绑定test，引入components目录下的自定义test组件
import test from './components/test'
new Vue({
el:'#test',
components:{ test },
template:'<test/>'
})
在components目录下创建test.vue组件
<template>
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
<ul>
<li-test
v-for="(item,index) of list"
:key="index"
:content='item'
:index='index'
@delete='handleDelete'
></li-test>
</ul>
</div>
</template>
<script>
import liTest from '@/components/li-test';
export default {
name:'test',
data() {
return {
inputValue:'',
list:[]
}
},
components:{
'li-test':liTest
},
methods : {
handleSubmit (){
this.list.push(this.inputValue);
this.inputValue='';
},
handleDelete (index){
this.list.splice(index,1);
}
}
}
</script>
注意：使用vue-cli脚手架管理项目的话组件中的data有所变化不再是以对象的形式存在而是以函数的形式存在，函数的返回值仍是对象区别如下：
在脚手架中data为函数的形式，其值为return的返回值对象
在components目录下创建抽取出来的用来生成li的组件li-test.vue
<template>
<li @click="handleDelete">{{content}}</li>
</template>
<script>
export default {
name:'li-test',
props:['content','index'],
methods:{
handleDelete(){
this.$emit('delete',this.index)
}
}
}
</script>
可以看到除了data的语法有变其他都是一样的
当然不要忘记html模板要放在<template>标签下~
都是自己在网上看学习资料的一些心得和学习笔记，如有不对欢迎指正讨论，共同进步
网友评论