一. 推荐开发环境
二. 安装环境
vim ~/.bash_profile
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
关掉终端重新打开,nvm ls-remote(查看)
nvm install v5.10.1
nvm use v5.10.1
npm install cnpm
安装webpack: npm install webpack -g
安装vue-cli:npm install vue-cli -g
三.根据模板创建项目
创建vue2.*项目: vue init webpack-simple 项目名
或者:vue init webpack 项目名
创建vue1项目:vue init webpack-simple#1.0 项目名
四.安装依赖,启动项目
安装依赖:npm install
启动项目:npm run dev
注:如果报找不到依赖包的错就把该依赖包重新下载
五. 目录结构(以vue init webpack 项目名 为例)
目录/文件 | 说明 |
---|---|
build | 最终发布的时候会把代码发布在这里 |
config | 配置目录 |
node_modules | 项目依赖 |
src | 开发目录 |
static | 资源目录,可以放图片,字体什么的 |
test | 初始测试目录,没用,删除即可 |
.xxxx文件 | 这些是一些配置文件,包括语法配置,git配置等。 |
index.html | 首页入口文件,如果是开发移动端项目,可以在head 区域加上合适的meta 头 |
package.json | 项目配置文件。 |
README.md | 一般是项目说明 |
App.vue项目的入口文件
main.js项目的核心文件,全局的配置都在这里。