【vue】入门学习，安装vue

一、安装vue

安装vue的网址Download | Node.js

安装后查看版本

npm -v

安装淘宝定制的cnpm工具代替npm，以后就可以使用cnpm安装模块了

npm install -g cnpm --registry=https://registry.npmmirror.com

安装vue-cli

cnpm install -g @vue/cli

然后在vue项目中运行

vue upgrade --next

用vue init命令创建一个项目 项目名为my-app

vue init webpack my-app

进入项目并运行

cd my-app
cnpm run dev

打包vue项目

cnpm run build

如果直接双击打开 index.html，在浏览器中页面可能是空白了，要正常显示则需要修改下 index.html 文件中 js、css 文件路径。

例如我们打开 dist/index.html 文件看到 css 和 js 文件路径是绝对路径：

<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 文件就可以在浏览器中看到效果了。