vue-cli 脚手架

vue脚手架

vue-cli 基于webpack。帮助我们完成了对项目的基本架构，冗余代码比较多，资源的浪费

1.全局安装vue的脚手架

cnpm install @vue/cli -g

2.查看版本号

vue -v

3.创建项目

vue create demo

Vue CLI v4.2.2

? Please pick a preset: (Use arrow keys)

  default (babel, eslint)      //第一项是默认

> Manually select features     //自定义

选择自定义

Vue CLI v4.2.2

? 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)

>(*) Babel                       //es6转es5一些插件

 ( ) TypeScript

 ( ) Progressive Web App (PWA) Support

 (*) Router                      //路由

 (*) Vuex

 (*) CSS Pre-processors          //预处理语言

 (*) Linter / Formatter		     //规范代码书写

 ( ) Unit Testing

 ( ) E2E Testing

是否设置历史模式的路由器

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

//使用历史模式的路由器?(需要为生产环境中的索引回退进行适当的服务器设置) Y

选择预处理语言

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)

> Sass/SCSS (with dart-sass)

  Sass/SCSS (with node-sass)

  Less

  Stylus

 //选择 Sass/SCSS (with dart-sass)

选择ESLint的规范

 Pick a linter / formatter config: (Use arrow keys)

 ESLint with error prevention only

  ESLint + Airbnb config

> ESLint + Standard config  // 选择标准规范

  ESLint + 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  //提交时

每个插件的配置项写在单独的文件夹还是package.json中

 Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

> In dedicated config files

  In package.json         //选哪个都可以

配置完成，下载代码

4.进入项目

cd demo

4.运行项目

npm run server

5.编译打包

npm run build  //编译打包   线上环境

文件结构

node_modules :项目所依赖的安装包

public ：项目当中的页面

       <noscript>

          <strong>We're sorry but one doesn't work  properly without JavaScript enabled. Please enable it to continue.</strong>

       </noscript>

//页面不支持js时 输出代码

src：开发环境

    assets：存放静态资源。图片，公共样式

    component：存放组件

    router：路由的配置

    views：项目当中的页面

    store:vuex

    main.js  项目的入口文件

    APP.vue

dist：

  编译打包后的文件目录

  文件不能直接打开  引入资源用的是绝对路径 换成相对路径

  xxx.map  可以删除进一步降低体积大小

main.js文件

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

Vue.config.productionTip = false

new Vue({

  router,

  // store,

  render: h => h(App)

}).$mount('#app')

render函数

render函数可以用js语言来构建DOM

 new Vue({

        el :"#root",

        render(createElement){

            return createElement("h5","123")

        }

    })

$mount

$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。
new Vue时，el和$mount并没有本质上的不同。

巴特西

vue-cli 脚手架

vue脚手架

1.全局安装vue的脚手架

2.查看版本号

3.创建项目

4.进入项目

4.运行项目

5.编译打包

文件结构

main.js文件

render函数

$mount

最新文章

热门文章