Vue项目搭建与webStorm使用-优快云博客

第一日:软件的安装和下载

　　1.百度搜索推荐使用webStorm前端神器进行开发,傻瓜式安装不必多说!　　

　　　激活前提：修改本地的hosts配置文件（/etc/hosts）最后一行新增这句话：0.0.0.0 account.jetbrains.com

　　　　然后去 http://idea.lanyus.com/ 这个网站生成一个激活码放在打开的activetion code里面即可

　　2.利用webstorm创建vue项目.vue主流前端框架.准备条件

　　　　(1).搭建Javascript运行环境node.js,安装完成node.js，npm也就安装完成了

　　　　(2).安装模块命令:

　　　　　　npm cache clean --force 清理cache后再安装

　　　　　　安装express模块: npm install express -g;

　　　　　　安装 weex国内镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org; cnpm install -g weex-toolkit;

　　　　　　安装webpack: npm install webpack -g ;

　　　　　　安装Autoprefixer npm install autoprefixer -g 　　#--自动补全代码

　　　　　　安装postcss-cli npm install postcss-cli -g　　　　#--自动补全代码

　　　　　　安装axios并引入:npm install axios -S　　　　　 #支持ajax请求

　　　　　安装 vue-cli脚手架:npm install vue-cli -g 　　　　# -g是全局安装的意思

　　　　(3).安装Git

　　3.进入项目目录初始化vue项目 vue init webpack 项目名字<项目名字不能用中文>

　　　　Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)

　　　　Project name (vue-test) 直接回车默认
　　　　Project description (A Vue.js project) 直接回车默认
　　　　Author 直接回车默认
　　　　Use ESLint to lint your code? n
　　　　pick an eslint preset. 默认Standard
　　　　setup unit tests with karma + mocha?No(单元测试不需要)
　　　　setup e2e tests with Nightwatch?No(单元测试不需要)

　　4.进入项目目录:

　　　　npm install 初始化安装依赖

　　　　npm run dev 执行选中http://localhost:8080,鼠标右键复制，在浏览器打开。看到欢迎页面。

　　　　npm run build 打包发布项目

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式