黑马程序员技术交流社区

标题: 【广州前端】- vue-cli脚手架使用图文教程 [打印本页]

---

作者: dakk    时间: 2017-12-7 14:54
标题: 【广州前端】- vue-cli脚手架使用图文教程


vue-cli作用

vue-cli作为vue的脚手架，可以帮助我们在实际开发中自动生成vue.js的模板工程。无需自己配置开发环境

---

一.  vue-cli使用

       !!前提：需要vue和webpack

       1. 安装全局vue-cli

npm install vue-cli -g

      2. 初始化，生成项目模板（my_project是项目名，自己随意     

vue init webpack my_project

            

      3.进入生成的项目文件夹

cd my_project

            

      4.初始化，安装依赖

npm install

        安装完成，目录树：

      

      5.启动项目

npm run dev

            

      6. 浏览器会自动打开到http://localhost:8080/#/ ，会看到欢迎页：

二. 打包生成静态文件：
   

npm run build

        打开dist文件夹下新生成的index.html文件，会发现页面空白，打开控制台会发现页面中引用的css和js文件都找不到

    解决方案1：以服务器的方式打开

       1. 安装 http-server

npm install -g http-server  // 该命令只需执行一次, 安装过之后, 以后就不需要重复安装了

            
        2.进入dist目录

cd dist

        3. 命令行执行

hs

   解决方案2：更改项目目录下的配置

        1. 打开 项目 config/index.js

        2. 原配置中的引用路径assetsPublicPath 的值是' / '

        3. 把 assetsPublicPath 的值更改成' ./ '

       4. 再执行

npm run build

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2