vue-cli 脚手架 - 九九柒 - 博客园

vue脚手架

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

1.全局安装vue的脚手架
cnpm install @vue/cli -g
2.查看版本号
vue -v
3.创建项目

  1. vue create demo

    Vue CLI v4.2.2
? Please pick a preset: (Use arrow keys)
  default (babel, eslint)      //第一项是默认
> Manually select features     //自定义

  2. 选择自定义

    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

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

    ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
//使用历史模式的路由器?(需要为生产环境中的索引回退进行适当的服务器设置) Y

  4. 选择预处理语言

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

  5. 选择ESLint的规范

     Pick a linter / formatter config: (Use arrow keys)
 ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config  // 选择标准规范
  ESLint + Prettier

  6. 在什么时候结构化代码

    ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save          //保存时
 ( ) Lint and fix on commit  //提交时

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

     Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json         //选哪个都可以
  8. 配置完成，下载代码
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并没有本质上的不同。

Original url: Access
Created at: 2020-09-03 13:56:13
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论