【学习笔记】【Vue】【菜鸟教程】学习笔记

【来源】：https://www.runoob.com/vue2/vue-install.html

【菜鸟教程】学习笔记

• 一、【安装与运行】
• 二、【项目结构】
• 三、【起步】
• • （一）你好，南方。
  • （二）路由的使用

一、【安装与运行】

// 升级 npm
cnpm install npm -g
// 升级或安装 cnpm
npm install cnpm -g
// 全局安装 vue-cli
cnpm install --global vue-cli
// 创建一个基于webpack模板的新项目
vue init webpack mywork
// 后面需要进行一些配置，默认回车就可以
// 完事后
cd mywork
cnpm install
cnpm run dev

二、【项目结构】

三、【起步】

注：起步前，可以先把vue的规范去掉，避免代码中有多余空格空行就报错。
解决方法：【BUG日记】【Vue】空格和空行会报错

（一）你好，南方。

修改src目录里的components目录下的HelloWorld.vue文件

// 内容替换为以下
<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'hello',data () {return {msg: '你好，南方。'}}
}
</script>

// 在终端运行
npm run dev

（二）路由的使用

【借鉴】：https://blog.csdn.net/a772304419/article/details/104991233
在components下创建三个文件List.vue，About.vue，MyApp.vue

修改router下的index.js文件

启动

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！