vue安装

本文为个人实战经验,仅供参考

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

本人小白一枚,刚接触vue,望各位大神多多指教.