Vue 入门文章
https://cn.vuejs.org/v2/guide/instance.html
1、安装脚手架
使用下列任一命令安装这个新的包:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
用这个命令来检查其版本是否正确 (3.x):
vue --version
# OR
vue -V
2、WebPack
webpack是前端资源模块化管理和打包工具,可将松散的模块按依赖和规则打包成符合生产环境部署的前端资源。可将按需加载的模块进行代码分隔并进行异步加载。通过loader的装换,任何形式的资源都可视作模块,如CommonJS模块、AMD模块、ES6模块、CSS、图片、JSON、CoffeeScript、LESS等。webpack是一个现代JS应用程序的静态模块打包器(module bundle)。当webpack处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。
使用一下命令安装
//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack
3、创建模板项目
// 安装vue-cli
npm install -g @vue/cli-init
// 创建vue webpack模板项目
vue init webpack projectName
? Project name manager -------------------项目名称
? Project description A Vue.js project ------------------- 项目描述及
? Author ------------------- 作者信息
? Vue build standalone
? Install vue-router? Yes-------------------是否安装路由
? Use ESLint to lint your code? Yes----------使用ESLint,相当管理代码,风格统一处理,各种检测 (类似js严格检查)n忽略
? Pick an ESLint preset Standard
? Set up unit tests Yes -------------------单元测试
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes----------------设置端到端测试
? Should we run `npm install` for you after the project has been created? (recommended) npm
执行命令后等待几分钟。
启动
// 进入项目目录
cd manager
// 启动
npm run dev
启动成功
项目目录说明 # build webpack 编译的配置文件 # config 项目核心配置文件 # node_modules 项目依赖模块,可以删除(安装npm install) # src 项目模块 router 路由 components 自定义组件 main.js 入口 App.vue 模板组件 # static 全局静态文件 # .babelrc 转码器,将es6,es7的代码解析为浏览器认识的代码 # .editorconfig 配置文件 # index.html 初始化vue容器 # package.json 项目依赖(类似maven中的pom.xml) ^表示版本最高
1、修改端口
config/index.js,修改port
2、启动后自动打开浏览器
config/index.js,修改autoOpenBrowser为true