本文为个人实战经验,仅供参考
1、 安装nodejs
直接网上找下载就好
nodejs中文网下载地址: http://nodejs.cn/download/
nodejs英文网下载地址: https://nodejs.org/en/download/
2、 安装淘宝镜像
npm install -g cnpm --registry=http://registry.npm.taobao.org
cnpm -v
3、 安装webpack
cnpm install webpack -g
4、 安装vue-cli
cnpm install -g vue-cli
5、在你想要新建项目的路径下新建文件夹 用于存放项目文件
cd 进入你的文件路径
下载模板
vue init webpack-simple first_vue
vue init webpack-simple/webpack 工程名字(名字不能用中文)
(Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理))
Project name (vue-test) 直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 直接回车默认
Install vue-router? y/n vue路由(后续也可安装)
Use ESLint to lint your code? y/n 语法检查工具
pick an eslint preset. 默认Standard
setup unit tests with karma + mocha?y/n 单元测试
setup e2e tests with Nightwatch?y/n 单元测试
到此项目就搭建好了 接下来启动吧
6、 进入项目
6.1 打开终端
cd 项目名字
6.2 安装项目依赖
npm/cnpm install
6.3 安装 vue 路由模块vue-router和网络请求模块vue-resource –save-dev 是你开发时候依赖的东西,–save 是你发布之后还依赖的东西
npm install vue-router vue-resource –save
6.4 启动项目
npm run dev
看到下边界面就说明此项目已经启动
6.5 发布项目(打包)
npm run build
试试能否成功看到项目效果
以为就这么简单的成功了,在浏览器上输入:http://localhost/dist/index.html,没有看到想要的页面,打开开发者工具,看到Console下出现了很多错误。
到项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”,改为“./”即可,就在前面加个点就可以了
我们一开始运行npm run build 命令时,有这么一段提示:
这段话的意思就是说:构建文件务必放在一个HTTP服务器。直接打开index.html文件会出现一些问题。
那就是电脑上要安装服务器。只要你的服务器上有支持http或者https的服务器软件就可以,我知道的有nginx和apache两种,只要安装了两个中的一个,并且配合好访问路径,把你生成的文件放到服务器下或者映射路径下,启动你的服务器软件即可,然后就可以使用你配置的路径访问项目。
我在浏览器上直接是输入localhost或者127.0.01,打开文件目录的,http://127.0.0.1/htdocs/dist/index.html