vue-cli3.0搭建与配置 ## 为什么要使用 vue-cli3.0 1. 模板更加制定化 2. 配置更加简洁 ## 如何新建项目 ### 使用 npm 全局安装 vue-cli : 1. npm install -g @vue/cli //如果已经安装过就不用安装了 ### 创建项目执行: 1. vue create my-project ### 选择项目类型 ```js Vue CLI v3.0.0-beta.6 ? Please pick a preset: (Use arrow keys) > xs-default (vue-router, vuex, stylus, babel, pwa, eslint, unit-jest) // 这是我运行过之后的默认设置,第一次执行create是没有的 default (babel, eslint) Manually select features // 注:按键盘上下键选择默认(default)还是手动(Manually), //如果选择default,一路回车执行下去就行了(注:现在vue-cli3.0默认使用yarn下载),这里我选择手动, ``` ### 选择特性支持 ```js ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) >( ) TypeScript // 支持使用 TypeScript 书写源码 ( ) Progressive Web App (PWA) Support // PWA 支持 ( ) Router // 支持 vue-router ( ) Vuex // 支持 vuex ( ) CSS Pre-processors // 支持 CSS 预处理器。 ( ) Linter / Formatter // 支持代码风格检查和格式化。 ( ) Unit Testing // 支持单元测试。 ( ) E2E Testing // 支持 E2E 测试。 // 注意:你要集成什么就选就行了(注:空格键是选中与取消,A键是全选) ``` ### 选择css预处理,这里我选择stylus ```js ? Please pick a preset: Manually select features ? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): > SCSS/SASS LESS Stylus ``` ### 选择ESLint + Prettier ``` js ? Please pick a preset: Manually select features ? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier ``` ### 选择语法检查方式,这里我选择保存就检测 ```js Vue CLI v3.0.0-beta.6 ? Please pick a preset: Manually select features ? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: Prettier ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >( ) Lint on save // 保存就检测 ( ) Lint and fix on commit // fix和commit时候检查 ``` ### 选择单元测试 ```js Vue CLI v3.0.0-beta.6 ? Please pick a preset: Manually select features ? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Pick a unit testing solution: (Use arrow keys) > Mocha + Chai Jest ``` ### 她会问你 ,把babel,postcss,eslint这些配置文件放哪,这里随便选,我选择放在独立文件夹 ```js Vue CLI v3.0.0-beta.6 ? Please pick a preset: Manually select features ? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Pick a unit testing solution: Jest ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) > In dedicated config files // 独立文件放置 In package.json // 放package.json里 ``` ### 键入N不记录,如果键入Y需要输入保存名字,如第一步所看到的我保存的名字为xs-default ```js Vue CLI v3.0.0-beta.6 ? Please pick a preset: Manually select features ? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Pick a unit testing solution: Jest ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? (Y/n) // 是否记录一下以便下次继续使用这套配置 ``` ### 确定后,等待下载依赖模块 ## 启动项目 1. 初始完之后,进入到项目根目录: cd my-project 2. 启动项目:npm run serve 3. 在浏览器输入http://localhost:8080就可以看到vue的欢迎界面 ## 打包上线 1. vue-cli 也提供了打包的命令,在项目根目录下执行: npm run build 2. 执行完之后,可以看到在项目根目录下多出了一个 dist 目录,该目录下就是打包好的所有静态资源,直接部署到静态资源服务器就好了。 ## 项目的大致目录结构 ![项目的大致目录结构](https://upload-images.jianshu.io/upload_images/11576163-c7432e7ebd756d2d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/428 "项目的大致目录结构.jpg") 1. 现在的目录是3.0的cli看上去简洁多了,去掉了2.0 build和config等目录 2. 关于代码编写基本上与vue2的目录结构相差不大 ## 注意: 1. 如果想要修改端口号以及webpack配置,需要你在根目录下面创建一个vue.config.js ## vue.config.js完整默认配置 ```js module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='development' (开发环境) * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/', */ // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler? // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only compiler: false, // webpack配置 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: () => {}, configureWebpack: () => {}, //如果想要引入babel-polyfill可以这样写 // configureWebpack: (config) => { // config.entry = ["babel-polyfill", "./src/main.js"] // }, // vue-loader 配置项 // https://vue-loader.vuejs.org/en/options.html vueLoader: {}, // 生产环境是否生成 sourceMap 文件 productionSourceMap: true, // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: {}, // 启用 CSS modules for all css / pre-processor files. modules: false }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores parallel: require('os').cpus().length > 1, // 是否启用dll // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode dll: false, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {}, // webpack-dev-server 相关配置 devServer: { open: process.platform === 'darwin', host: '0.0.0.0', port: 8080, https: false, hotOnly: false, proxy: null, // 设置代理 before: app => {} }, // 第三方插件配置 pluginOptions: { // ... } } ``` ## 后记: 1. 当你准备着手一个新的项目的时候,请事先想清楚这个项目的架构以及用到的ui组件等等 2. 比如我们的项目 ``` 1. 使用vant UI组件 2. 封装axios服务 3. 使用路由拆分(基于history) 4. 路由切换动画 。。。 ```
vue-cli3.0搭建与配置
猜你喜欢
转载自www.cnblogs.com/Anthony518/p/12009628.html
今日推荐
周排行