一、script 引入
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
二、NPM 方法安装
npm install vue
三、命令行工具
// Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd my-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
// 进入项目，安装并运行：
$ cd my-project
$ cnpm install
$ cnpm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080
// 成功执行以上命令后访问 http://localhost:8080/
四、Vue 项目打包
打包 Vue 项目使用以下命令：
npm run build
执行完成后，会在 Vue 项目下生成一个 dist 目录，一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images。
如果直接双击 index.html 打开浏览器，页面可能是空白了，修改下 index.html 文件中 js、css 路径即可。
例如我们打开 dist/index.html 文件看到路径是绝对路径：
<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet><script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>我们把 js、css 路径路径修改为相对路径：
<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet><script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>这样直接双击 dist/index.html 文件就可以在浏览器中看到效果了。
758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
