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