Vue环境搭建

全局安装命令行工具vue-cli(Vue脚手架)

cnpm install -g vue-cli

创建一个基于webpack模板的新项目

  1. vue init webpack vuebase
  2. 各项提示:
    1. Project name:项目名称(安装完成之后打开项目上面title上会显示,项目名称尽量不要存在中文,不能存在大小写区别)
    2. Project description:项目描述
    3. Author:作者
    4. Vue build、Runtime+Compiler、Runtime-only(运行时+编译的过程、要使用哪些包)
    5. Install vue-router?是否安装路由
    6. Use ESLint to lint your code ?ESLint代码检查,一旦安装,代码的空格换行都必须遵循它的统一风格。
    7. Set up unit tests:这个环境不仅用于开发环境,还用于测试环境,这个是测试时使用的测试模块
    8. Setup e2e tests with Nightwatch? 自动化测试模块

安装依赖包

vue init webpack VueBase
cd vuebase
cnpm install


启动项目

npm run dev

项目目录结构

  1. index.html 根HTML视图文件
  2. .postcssrc.js postcss配置文件
  3. .gitignore 使用git版本管理工具上传时的忽略文件
  4. .babelrc Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。Babel的配置文件是.babelrc,存放在项目的根目录下。具体使用配置方法详见Babel 入门教程
  5. static 静态文件目录,服务器启动之后可以直接访问到static下的文件内容,自己的项目通常会把一些json文件、文档放置在该目录下
  6. src 源码文件
  7. config 配置文件,主要这对于开发时的一些服务器上的配置。(开发环境的配置、生产环境的配置、服务器的端口、地址、是否自动启动运行...)
  8. build 包含服务器和webpack。build.js和utils.js(服务器的配置文件)、logo、vue-loader.conf.js、webpack的配置文件(webpack.base.conf.js【公共的webpack配置文件】/webpack.dev.conf.js【开发环境的webpack配置文件】/webpack.prod.conf.js【生产环境下的webpack配置文件】)
feihu分享到:

          

You may also like...

Scroll Up