Vue项目环境搭建

Vue.js环境配置

标签引入

地址:https://vuejs.org/js/vue.js

NPM安装

一、安装node环境(电脑已安装node.js更新至最新版)

a)  下载地址：https://nodejs.org/en/ 或者  http://nodejs.cn/

                   参考: http://www.runoob.com/nodejs/nodejs-install-setup.html

 

              可以下载绿色版nodejs，配置环境变量即可使用

b)  检测node 是否安装成功

在命令行输入  node -v 和 npm  -v 查看node和npm版本 (安装node会自带npm并且会自己在)

在命令行输入  npm  -v查看npm版本  可以用淘宝的npm镜像替换node 的npm

在命令行输入下面代码，即可安装npm镜像

 

大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

这样就可以使用 cnpm 命令来安装模块了：

cnpm install [name]

 

   

   

二、安装全局vue-cli脚手架、webpack.

1.  cnpm install -g vue-cli
//全局安装vue-cli   vue -V

2.  cnpm install -g webpack
//全局安装webpack

三、新建vue.js项目

            输入命令vue init webpack  vue_project_name(乱码请无视,cmd工具原因)
一路回车

目录结构  
         

四、运行项目(对于新项目都要执行 install,安装依赖才能运行)

i.  命令行输入cnpm install
安装依赖  会多出一个node_modules的文件夹

ii. 命令行输入 cnpm run dev
运行项目

五、打包项目

命令行输入cnpm run build

会生成静态文件，在根目录的dist里，里面有个index.html 和static文件夹,拷贝到服务器上即可使用

但是index.html里引用的css和js路径需要更改

打开项目中config文件下的index.js

更改build下assetsPublicPath属性的值为 ’./’

 

 

四开发工具

一、 Webstorm

下载地址:

https://download.jetbrains.8686c.com/webstorm/WebStorm-2017.3.exe

webstorm 2017 激活破解

编辑

删除

2017-06-15更新
之前都是使用2017.2.27的方法，版本是2017.1.1，还没提示过期，但是根据评论说这个链接已经失效了，评论也给出了个新地址：http://idea.iteblog.com/key.php
感谢 @qq_35381272 友情提供

2017.2.27更新
选择“license server” 输入：http://idea.imsxm.com/

2016.2.2 版本的破解方式：
安装以后，打开软件会弹出一个对话框；选择“license server” 输入：http://114.215.133.70:41017

二、vscode 官网免费下载

下载后倒入项目