- 定位到你的工作目录,打开终端(会在你的工作目录下新建项目)
- 全局安装vue-cli
npm install vue-cli -g
- 查看版本
vue -V
- 基于webpack来构建一个名称为hello的vue项目
vue init webpack hello
- 出现提示
Command vue init requires a global addon to be installed. Please run yarn global add @vue/cli-init and try again.
- 安装@vue/cli-init
npm i -g @vue/cli-init
- 继续建项目
vue init webpack hello
- 出现提示
Project Name:要创建的项目名称(回车 )
Project Description:项目简介(回车 )
Author:作者
下一步直接回车
Install vue-router:是否安装vue路由组件,做项目的话一定要安装(y )
Use ESLint to lint your code:是否需要使用ESLint模块进行代码检测(y )
Set up unit tests: 是否需要自动化单元测试(y)
Pick a test runner :(回车)
Setup e2e tests with Nightwatch?:是否安装端到端的测试(y )
Should we run `npm install` for you after the project has been created? (recommended): 在后续安装依赖包是是否使用npm install安装(是,回车)
- 完成
-
项目目录
build:项目webpack配置文件
config:针对开发环境和线上环境的配置文件
node_modules:项目依赖包
src:源代码目录
static:静态资源
.babelrc:JavaScript 语法的编译器
.editorconfig:针对babel的编译,浏览器配置
.eslintignore:针对babel的编译,eslint检测规则配置
.eslintrc.js:针对babel的编译,eslint检测规则配置
.gitignore:git 配置文件
.postcssrc.js:转换成css格式的插件
index.html:整个项目的入口index页,包含根实例的挂载点
package.json:定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)
package-lock.json:其实package-lock就是锁定安装时的包版本号,需要上传到git上,以保证其他人在install时候,大家的依赖版本相同 -
src目录下文件介绍
main.js:整个项目入口文件el:#app
创建了一个vue的实例app让其挂载在index.html的id=app的节点上
components: { App }
注册局部组件APP,APP来源:import App from './App',即引入当前目录下的APP.vue组件
template: '<App/>'
定义模板为APP组件的内容
即,main中创建vue实例展示的就是APP.vue组件中的内容APP.vue:单文件组件,包含三部分
第一部分:<template>模板部分
第二部分:<script>逻辑部分
第三部分:<style>样式部分
使用vue-cli创建项目
猜你喜欢
转载自www.cnblogs.com/HuangJie-sol/p/11951031.html
今日推荐
周排行