Vue项目(一)

搭建 vue+webpack 项目框架

1.https://nodejs.org/  nodejs 官方网站下载安装包  cmd ---> node -v命令查看是否安装成功

避免npm资源被屏蔽导致npm安装依赖包失败，安装国内镜像

npm install-g cnpm --registry=http://registry.npm.taobao.org

2.安装vue-cli 脚手架,帮助搭建所需要的模板框架

cnpm install -g vue-cli

3.用命令行打开项目需要存放的路径

vue init webpack vue-demo

根据提示填写项目名、作者等信息

出现上图所示代表构建成功

4.进入项目安装路径

npm install 安装依赖

npm run dev 运行项目

回顾：

下载安装node.js( node -v 查看是否安装成功)

npm install -g vue-cli 安装vue-cli脚手架 （vue回车出现信息说明成功）

cd 命令进入项目需要放置的路径 

vue init webpackn vue-demo

设置项目名作者名等

Documentation can be found at https://vuejs-templates.github.io/webpack 项目构建成功

cd命令 进入项目名文件

npm install 安装项目依赖

npm run dev 运行项目

部署服务器

1.cd 命令进入想所在文件夹，执行命令

npm run build 

2.dist文件夹里面的 static文件夹和index.html文件 复制到服务器上

问题积累

1.出现空白也问题，conf/index.js文件中修改webpack配置

assetsPublicPath: './'   //根据浏览器调试资源报错路径修改

vue-router配置中的base值改与assetsPublicPath相同

2.去除路径中 /#/

router /router.js 新增 mode:'history'

mode:'history',
path: XXX,
component: XXX,