vue 项目结构搭建 脚手架的搭建 Vue-cil


vue-cil :vue脚手架:提供基本项目结构

本身集成了很多项目模板:

    webpack:

    webpack-simple:

 

mac 安装 前提示安装好node

1.输入 sudo npm install -g vue-cli 这个命令;

2.输入 vue

3.输入 vue init webpack-simple vue_demo

4进入cd vue_demo

5 安装 npm install

6运行 sudo npm run dev


 

 搭建

1﹜ 安装Vue-cli 在终端执行npm install –g vue-cli 如果mac系统安装失败请使用 sudo  install –g vue-cli 

2﹜ 使用vue-cli 新建项目,打开终端找一个你打算存放项目的目录,随便一个目录都可以,在终端执行 vue init webpack vuecli ,PS:vuecli 是项目名称,实际开发中修改成你想用的项目名称即可;

Project name :项目名称,同项目初始化时的名称,如果不做修改直接enter;

Project description:项目描述,这个基本可以不用修改直接enter即可;

Author:作者,enter即可;

Runtime + Compiler: recommended for most users:enter即可;

Ininstall vue-router:是否安装vue-router,如果需要路由功能直接enter,如果不需要直接N 然后enter;

Use ESLint to lint your code?:是否使用ESLint,是一个检查javascript语法错误的工具,这个前期可以直接N掉;

Setup unit tests with Karma + Mocha?:这个前期也可以直接N掉;

Setup e2e tests with Nightwatch?:Nightwatch是一个测试工具,N掉即可,前期用不到;

然后根据提示执行,

cd vuecli:进入项目目录;

npm install :安装项目依赖,这可能会慢些,因为有些是境外资源,有经验的同学可以更换一下安装源,百度即可;

npm run dev : 运行程序,此时你默认的浏览器会打开一个新的页面,表示你安装成功并成功使用vue-cli初始化了一个项目;

 

 

|-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- dev-client.js // 热重载相关 | |-- dev-server.js // 构建本地服务器 | |-- utils.js // 构建工具相关 | |-- webpack.base.conf.js // webpack基础配置 | |-- webpack.dev.conf.js // webpack开发环境配置 | |-- webpack.prod.conf.js // webpack生产环境配置 |-- config // 项目开发环境配置 | |-- dev.env.js // 开发环境变量 | |-- index.js // 项目一些配置变量 | |-- prod.env.js // 生产环境变量 | |-- test.env.js // 测试环境变量 |-- src // 源码目录 | |-- assets // 资源目录 | |-- components // vue公共组件 | |-- store // vuex的状态管理 | |-- App.vue // 页面入口文件 | |-- main.js // 程序入口文件,加载各种公共组件 |-- static // 静态文件,比如一些图片,json数据等 | |-- data // 群聊分析得到的数据用于数据可视化 |-- .babelrc // ES6语法编译配置 |-- .editorconfig // 定义代码格式 |-- .gitignore // git上传需要忽略的文件格式 | |-- .postcssrc.js // 通过JS插件装换样式的工具 |-- README.md // 项目说明 |-- favicon.ico |-- index.html // 入口页面 |-- package.json // 项目基本信息


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM