The vue project views the implementation of vue and cli versions

To view the cli version, do the following:

vue -V

View vue version

npm list vue

Supplementary knowledge: vue old project upgrade vue-cli3.0 problem summary

Upgrade steps

1. Remove the original vue-cli and install vue-cli3.0

2. Delete the contents under src in the new project and overwrite the src directory in the original project to the new project

3. Change router from directory folder to file, and improve src/router/index. js by one layer to src/router. js

4. In my project, src has been divided into views and components, so there is no need to modify it. If it is not this structure, it needs to be distinguished by itself

5. Overlay index. html and favicon. ico of the original project into public of the new project

6. Copy the static folder of the original project to the public of the new project

7. Modify the package. json file and keep it with the original project 1

8. Create and configure the vue. config. js file

Delete command:

npm uninstall vue-cli -g

Install the @ vue/cli command:

npm install -g @vue/cli

I will omit the installation process here. There are already many articles on Nuggets. Here are the problems that will be encountered:

1. vue file not found

Error Reporting in CMD

These dependencies were not found:

* @/views/index/index in ./src/router.js

* @/views/index/otherIndex in ./src/router.js

To install them, you can run: npm install --save @/views/index/index @/views/index/other

Error reporting on the page

./src/router.js
Module not found:
Error: Can't resolve '@/views/index/index' in 'D:\VUE\haigui-proxy\src'
 This error is to indicate that the file path is wrong and the file cannot be found because the " @ "That is alias( Alias ) It is also possible that the extensions( You can omit the extension ) Therefore, it is necessary to set up a new project in the vue.config.js Set the following contents in: 
const path = require('path'); // vue.config.js Top 
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
 configureWebpack: config => {
 Object.assign(config, {
  resolve: {
  extensions: ['.js', '.vue', '.json'], //  Suffix name can be omitted 
  alias: { //  Alias , In require You can use these aliases to shorten the length of the path 
   '@': path.resolve(__dirname, './src'),
   '@c': path.resolve(__dirname, './src/components')
  }
  }
 });
 }
}

2. image picture cannot be found

Module not found:

Error: Can't resolve '../../../static/image/avatar_gray.jpg' in 'D:\VUE\haigui-proxy\src\views\index'

When copying src and static of the original project to the new project, there will be a problem of wrong picture path. Many articles on vue-cli3.0 configuration on the Internet say that static of the original project is directly copied to public of the new project. In fact, this is wrong. The official reason is:

Any static resources placed in the public folder are simply copied without going through webpack. They need to be referenced by absolute path.

For example, the directory is public/static/image, and image stores various pictures:

Introducing picture logo. png:

< img src="/static/image/logo.png" >

Set the background picture in css:

.bg {
background: url('/satic/image/bg.jpg');
}

Note:

The public directory provides a contingency. When you refer to it through an absolute path, pay attention to where the application will be deployed. If your application is not deployed at the root of the domain name, you need to configure the publicPath prefix for your URL.

When to use the public folder

You need to specify the name of 1 file in the build output.

You have thousands of pictures, and you need to dynamically reference their paths.

Some libraries may not be compatible with webpack, so you have no choice but to introduce them as a separate tag.

Processing benefits through webpack:

Scripts and style sheets are compressed and packaged in 1, thus avoiding additional network requests.

File loss will cause errors directly at compilation, instead of 404 errors at the client side.

The resulting filenames contain content hashes, so you don't have to worry about browsers caching older versions of them.

The public directory provides a contingency. When you refer to it through an absolute path, pay attention to where the application will be deployed.

The assets folder is used to place resources processed by webpack

Need to use relative path introduction:

< ! --According to the directory structure-- >

< img src="../assets/images/logo-black.png" >

img Dynamic Path:

<img :src="imgurl">
data () {
return { 
imgurl: require("../assets/images/gou.png") 
}
}

Background image of css:

.login-wrapper {
 background: url('../../assets/images/bg.jpg');
}

Reference: Official explanation

3. Configuration of scss global variables

Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Undefined variable. 955  The  
 border-right: 1px solid $borderColor;  
  ^^^^^^^^^^^^
root stylesheet in D:\VUE\haigui-proxy\src\views\index\index.vue (line 955, column 33)

If scss is used in the original project and global variables are used, it needs to be reconfigured in vue. config. js, and the global variable file is placed in src/assets/css directory.

It needs to be configured in build/utils. js in the original project

scss: generateLoaders('sass').concat(
 {
 loader: 'sass-resources-loader',
 options: {
  resources: path.resolve(__dirname, '../src/assets/css/haigui-variable.scss')
 }
 }
)

The new project is much simpler. vue. config. js can be edited directly and added with 1 section:

css: {
 loaderOptions: {
 sass: {
  // @/  Yes  src/  Alias of  ~ There must be something to add 
  data: '@import "~@/assets/css/haigui-variable";'
  //  If you don't set an alias, you can write it like this 
  // data: '@import "./src/assets/css/haigui-variable";'
 }
 }
}

4. runtime-only

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Reason:

vue has two forms of code, compiler (template) mode and runtime mode (runtime), and the main field of package. json of the vue module defaults to runtime mode, pointing to the position "dist/vue. runtime. common. js".

This is the feature of vue after upgrading to 2.0.

In the main. js file, the initialization vue is written in compiler mode, so the above error message will appear.

new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
});

Solution:

Method 1:

Modify the code in main. js as follows

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

Here our question is not finished, then why is it no problem before, before vue version is also 2. x ah?

This is also the second solution:

Because we had alias configuration in our webpack configuration file before, as follows

resolve: {
 alias: {
  'vue$': 'vue/dist/vue.esm.js' // Regular expression inside  vue Ending 
 }
}

That is, the line of import Vue from 'vue' is parsed to import Vue from 'vue/dist/vue. esm. js', specifying the file location directly, without using the default file location for the main field.

Therefore, the second solution is to add the following configuration of webpack to the vue. config. js file.

.bg {
background: url('/satic/image/bg.jpg');
}

0

Now that we have arrived at this point, we will think of the solution in the third, that is, when referring to vue, we can write it directly as follows

import Vue from 'vue/dist/vue.esm.js'