vue3新建项目

项目初始化过程 （项目git地址在最后）

1.基于3.x版本的VUE 直接使用 vue create 项目名称 初始化vue 项目模板

2.创建vue.config.js配置相关webpack

3. 添加vue-router以及vuex

npm install vue-router

在router文件下创建router.js文件。在main,js中导入

import router from './router/router';
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在app.vue使用路由:

vuex:

npm install vuex --save或yarn add vuex

创建store文件夹

4. 导入.eslint.js .eslintignore .env.production .env.development

1. .eslint.js .eslintignore: 代码检测配置
2. .env.production .env.development:项目生产和开发环境

5. 配置sass

只在开发换下使用
npm install --save-dev node-sass
npm install --save-dev sass-loader

在webpack中配置：

   css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            sass: {
                // @/ 是 src/ 的别名
                // 所以这里假设你有 `src/variables.sass` 这个文件
                // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
                additionalData: `@import "~@/variables.sass"`
            },
            // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
            // 因为 `scss` 语法在内部也是由 sass-loader 处理的
            // 但是在配置 `prependData` 选项的时候
            // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
            // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
            scss: {
                additionalData: `@import "~@/variables.scss";`
            },
            // 给 less-loader 传递 Less.js 相关选项
            less: {
                // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
                // `primary` is global variables fields name
                globalVars: {
                    primary: '#fff'
                }
            }
        }
    },

5. 导入 vant 参考vant官网

6. 全局样式： assets中创建css文件在main.js中引入

import './assets/css/global.css'

git地址：https://gitee.com/fengzhongzhuifeng/vue3-create-new-project