这个例子还是比较简单的。独立完成之后，大概就可以知道vue是做什么的了，可以写一个todoList的小例子。

在开始写示例之前，我们应该简单介绍一下环境的部署，类似于Vue的官方部署。

#如果还没有安装vue-cli，先在全局安装VUE-CLI $ CNPM I-GVUE-CLI #并基于webpack模板$ vue init webpack my-project##新建一个项目，然后问以下问题？项目名称(我的项目)#输入？项目描述#输入，还是写项目描述？作者#输入，还是输入作者？Vue独立构建#输入？安装vue路由器？(Y/n) #这里是官方推荐的路线，决然是的？使用ESLint来清理你的代码？#没有？设置单元测试#否？用守夜人设置e2e测试？#没有？项目创建后，我们应该为您运行“npm安装”吗？(推荐)是，使用NPM #可以通过按上下箭头键选择，这里我选择第一个NPM，按回车键确认是，使用纱号，我会自己处理#并等待完成

完成后可能会有警告，没什么，只是不ERR

$ cd my-project #进入新创建的文件夹$ cnpm install #。这里用的是淘宝的NPM形象。如果您不明白，您可以搜索cnpm $ NPM run dev # # # I您的应用程序正在这里运行： http://localhost 33608080。

**确保端口未被占用，打开localhost:8080请参见* *

按照以下方式打开我们的项目：

该名称描述了由构建项目构建的一些代码，配置开发环境的配置，node_modules，一些依赖包src源代码，在这个文件夹中，我们将编写代码的静态文件。babelrc ES6编译的一些配置文件。editorconfig代码样式配置文件。gitignore上传git时忽略的一些文件。例如，文章“node_modules”。postcssrc.js据说是index.html转换CSS样式的入口页面。package-lock.json据说是比较详细的package.json package.json项目信息、项目名称、开发依赖关系记录等。现在打开了一个JSON文件。src components helloworld.vue删除了大部分代码，其余如下：

template h1 { { msg } }/h1/templatescriptexportdefault {//es6语法，用于向外输出，这样就可以导入name3360' hello world '，data(){//由于是组件，数据必须是函数。这是ES6写作。数据后的括号相当于data: function () {} return {//记住return否则不会收到数据msg: 'Welcome' //上面的msg在这里输出} }/script style h1 { font-weight : normal；} a { color: # 42b983}/style在这里使用了一些ES6语法。如果对进出口一窍不通，建议阅读相关介绍。如果您暂时不想阅读代码，也可以键入代码。不过，建议看一下。了解进出口只需要10分钟。——阮一峰ECMAScript 6正在入门

如您所见，之前打开的页面已经更改：

# # # #现在我们来安装element-ui(请自行搜索element-ui的详细信息)

可以按照官方方法使用npm i element-ui -S命令进行安装，也可以在package.json中添加，然后通过cnpm install进行安装。选择2，打开package.json，找到devDependencies，最后添加' element-ui' : "2.2.1 "。

Devdependencies' : { .Element-UI' :' 2.2.1 '打开命令行停止服务，然后通过cnpm install进行安装。安装完成后，npm run dev启动并打开main.js添加三行内容。

从“元素导入ElementUI新添加导入'元素-ui/lib/主题-粉笔/index.css' //新添加，避免后期打包样式不同，要放在从""导入应用程序/App '；之前从“vue”导入某视频剪辑软件从“应用程序”导入/App”从导入路由器"。/router'Vue.use(ElementUI) //新添加Vue。配置。生产提示=false/* eslint-禁用no-new */new Vue({ El : ' # App '，路由器，组件： { App }，模板： 'App/'})添加了这三行，我们就可以使用元素用户界面了接下来在成分文件夹内新建一个NewContact.vue文件，添加如下代码

模板el行el按钮类型="成功“1/El-button/El-row/模板脚本/脚本样式/样式打开之前的HelloWorld.vue对内容进行修改（路由器是官方路由插件，路由器-链接到是路由器的语法):

模板！-这里路由器-链接到='newcontact '会把路由导航到http://localhost :8080/#/新联系人-路由器-链接到='新联系人' h1 { { msg } }/h1/路由器-链接/模板打开router/index.js，添加新路由（路由器是官方路由插件，深入学习请查看文档)

从“vue”导入某视频剪辑软件从“vue路由器”导入路由器从" @/组件/HelloWorld "导入编译从" @/组件/新联系人"//导入新联系人新添加，之后在下方的组件：新联系人才会生效用户(路由器)导出默认新路由器({路由器：[{路径： '/'，名称： 'HelloWorld '，组件： HelloWorld }，{ path: '/newcontact '，//和路由器-链接到相呼应，导航到/新联系人姓名：“新联系人”，组件：新联系人} ]})保存后打开页面可以看到如下：

之前的欢迎变成了可点击的链接，点击后跳转看到如下页面

至此，已经我们已经把该引入的依赖，和路由的简单配置，简单组件的使用给完成了接下来我们把精力都放到NewContact.vue这个组件，后面的代码几乎都在这个组件

打开NewContact.vue键入如下代码：

模板埃尔罗姓名：{ {信息。name } } El-input v-model=' info。'姓名'占位符='请输入姓名/El-输入年龄：{ {信息。age } } El-input v-model=' info。'年龄'占位符='请输入年龄/El-输入性别：{ {信息。sex } } El-select v-model=' info。“性”占位符='请选择El-option v-for=' options中的项目：键=' item ' :值=' item '/El-option！-这里的键官方推荐在迭代时使用，不然会警告，但不影响使用-/El-select/El-row/templatescriptexport default { name : ' NewContact '，data(){ return { info : { name : ' '，age: null，sex: '' }，options: ['女','男','保密]} } }/脚本样式/样式El-input v-model=' info。名称'/El-输入El-输入是元素用户界面的组件，以埃尔开头的是元素用户界面的组件v型这里的v型是某视频剪辑软件的指令，官方说法是——在表单控件或者组件上创建双向绑定='info.name '就是v型绑定的数据，在数据中返回的内容里看到信息名称对应的是'';信息年龄对应的是空

返回{ info: { name: ' '，age: null，sex: '' }当我们打开http://localhost :8080/#/新联系人

在输入框输入内容时可见，姓名：{{info.name}}双花括号里的内容也跟着改变，这就是双向绑定

El-option v-for=' options中的项目：键='项目' :值='项目' v-for='选项中的项目'就是循环选择这个数组的内容

选项： ['女','男','保密]如果在里面添加内容，那么下拉菜单的内容会一起变化，一一对应：value='item '会把你选的('女','男','保密)传给El-select v-model=' info。sex ' v-model='信息。“性”会传给数据中的信息性

返回{ info: { name: ' '，age: null，sex: '' }接下来在加入新代码，NewContact.vue目前的代码如下：

./El-select El-button @ click=' create ' create/El-button模板El-table 3360 data=' tabledata ' align=' left ' El-table-column prop=' name ' label=' name '/El-table-column El-table-column prop=' age ' label=' age '/El-table-column prop=' sex ' label=' operation '模板slot-scope=' a ' El-button size=' mini '年龄： 22，性别： '女性' }，{姓名：' LII '，年龄： 65，性别： '男性' }]} } }/script style/style El-button @ click=' create ' type=' success ' create/。

El-table :data='tabledata '是要绑定到表的数据

El-table-column prop='name' prop用于数据传输在表绑定数据的情况下，名称在tabeldata中

模板槽-作用域='a '是Vue2.5.0之后的作用域槽，用于替换以前的作用域。“a”是一个随机名称，用于获取稍后可以获取的行、列、$index和store。在这里，我们只需要得到索引，具体内容在这里。

@click='del(a.$index)@是v-on的缩写，表示点击后调用del函数，a.$index表示slot-scope得到的索引值

Tabledata:[//这里的内容方便我们看到表格的变化。可以看到页面上的表格有以下内容{姓名：' Leo '，年龄： 12，性别：' man'}，{姓名：' lei '，年龄： 22，性别：' women'}，{姓名：' LII '，年龄： 65，性别：' men'}]从打开的页面可以看到

当我们点击创建和删除按钮时没有响应，所以我们想添加方法并在其中添加两个方法，一个是创建，另一个是删除

添加数据(){ 0.}，methods: {//在data()之后{.}，create () {this。tabledata.push(这个。info)//将对象添加到tabledata(我们在info之前创建的信息)this.info={name: ' '，Age: null，sex: ''}//单击Create后，让option restore而不是停留在所选项目中}、del (index) {this。tabledata.split (index，1)//删除被单击的对象。索引是从批次范围='a' a.$index}传输的，添加和删除已在此完成。为了在刷新页面后保留数据，我们可以使用localStorage在本地存储数据。单击此处了解本地存储。

接下来，我们将在src中创建新的store文件夹，该文件夹与App.vue和components处于同一级别，并在其中创建一个新的store.js，内容如下

const storage _ key=' tabale-vuejs '//无论名称是什么，导出默认值{//long为输出。以便组件可以接收fetch() {//我们定义的获取数据的方法returnjson . parse(window . local storage . getitem(storage _ key)| | '[]')}。Save(items) {//我们定义的保存数据的方法window.localstorage . setitem(storage _ key，JSON . stringify(items))} } GetItem和setItem是在window . local storage中获取和保存数据的方法，我们使用JSON。Stringify和JSON.parse将数据转换成字符串并解析，这样我们就可以方便地编写tabledata了。接下来，我们添加新代码。

'脚本导入来自'的存储./store/store/新添加，把刚写的localStorage导入导出默认{name: 'NewContact '，data(){ return { info : { name : ' '，age: null，sex: '' }，options 3360['女','男','保密】，tabledata :存储。fetch()//把之前的删除，写入这个获取数据的方法} }，方法： { create(){ this。tabledata。推(这个。信息)这个。info={ name : ' '，age: null，sex: ''}，del(index){ this。tabledata。拼接(索引，1) } }，watch:{//新添加看着是某视频剪辑软件的监听，一旦监听对象有变化就会执行相应操作tabledata{//新添加，被监听的对象处理程序（项目){存储。保存（项目)},//新添加，监听对象变化后所做的操作，一个函数，保存数据deep: true//深度监听，避免数据的嵌套层数太多，要使用深度监听，防止数据层级过多监听不到}tabledata:由于提取()得到的是数组，所以直接tabledata:后写入就行类似于

tabledata : [{ 0.},{.}]当我们添加删除数据时，可以打开chrmoe浏览器的F12应用程序本地存储进行查看

总的来说就是我们点击页面上的创建按钮看着监听到列表数据有变化，就执行保存数据（项目){存储。保存（项目)}进行数据保存，点击删除时，tabledata也有变化，同样会执行保存可能之前写的内容会有不小心写错字母的情况，最后把NewContact.vue稍稍修改样式后，把完整的内容拷贝到下方：NewContact.vue

模板El-row El-col : xs=' 24 ' : sm=' 18 ' : MD=' 14 ' : LG=' 10 ' id=' main '标签姓名：/label El-input v-model=' info。名称“占位符=”请输入姓名/El-输入标签年龄：/label El-input v-model=' info。'年龄'占位符='请输入年龄/El-输入标签性别：/标签El El-选择v-model=' info。“性”占位符='请选择El-option v-for=' options中的项目：键=' item ' :值=' item '/El-option！-这里的键官方推荐在迭代时使用，不然会警告，但不影响使用-/El-选择El-button class=' BTN-auto ' @ click=' create ' type=' success '创建/el-button模板El-table :数据=' table data ' align=' left ' El-table-column prop=' name ' label='姓名/El-table-column El-table-column prop=' age ' label='年龄/El-table-column El-table-column prop=' sex ' label='性别/El-表格-列El-表格-列标签='操作模板槽-作用域=' a ' El-button size=' mini ' type=' danger ' @ click=' del(a . $ index)'删除/El-按钮/模板/El-表格-列/El-表格/模板/El-列/El-行/模板脚本从导入存储'./store/store ' export default { name : ' NewContact '，data(){ return { info : { name : ' '，age: null，sex: '' }，options: ['女','男','保密]，tabledata: Storage.fetch() }，方法： { create(){ this。tabledata。推(这个。信息)这个。info={ name : ' '，age: null，sex: ''}，del(index){ this。tabledata。拼接(索引，1) }，watch : { table data : { handler(items){ storage。save(items)}，deep 3: true } }/script margin : 0 auto }。El-input { padding-bottom : 5px；} .El-select { display : }块；} .BTN汽车{宽度： 100%；页边距-top : 12px；}/样式这里是本地存储：

const STORAGE _ KEY=' tabale-vue js '导出默认值{ fetch(){ return JSON。解析(窗口。本地存储。getitem(STORAGE _ KEY)| '[]')}，save(items){ window。本地存储。setitem(STORAGE _ KEY，JSON.stringify(items))}}完成后我们要进行打包，方便直接在浏览器中运行打开/配置/index.js

build : {//index.html索引：路径的模板。resolve(__dirname，'./dist/index.html '，//path assetroot : path . resolve(_ _ dirname，/dist ')，assets子目录：' static '，assets publicpath : '。/'，//添加了。避免生产路径/* * * source maps */production source maps : false的错误，//将其更改为false，然后运行$ npm run build并等待其完成。将生成dist文件夹，可以通过直接打开里面的index.html在浏览器中运行。

以上是一个基于边肖介绍的vue-cli和elementUI的Vue超级简单入口的小例子。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！