DingChangShi
Law-abiding sorrow, strong song every night, at the expense of others riding horses and mules, justice and hunger. Bridge repair road blind, murder arson son many, I went to the west to ask me Buddha, Buddha said: I also have no rut!Copy the code
An overview of the
There has been a major update to Vue Cli, the official scaffolding tool for Vue. Compared to the 2.x version, the new 3.x version has a new big difference in the construction of projects, related packages, plug-ins installation. This article is based on this, choose the @vue/ CLI 3.x version of the scaffolding tool, to build a VUE project from 0 to 1, including the initialization of the project, as well as vUE family bucket (VueRouter/Vuex/Axios/CSS preprocessor) related configuration.
First, know the new version
Vue/CLI 3.x version, pay more attention to the scaffolding tool itself ease of use and scalability, support out of the box, while providing a rich plug-in system.
Good place | Why so good? |
---|---|
feature-rich | Out-of-the-box support for Babel, TypeScript, ESLint, PostCSS, PWA, unit testing, and end-to-end testing. |
extensible | Its plug-in system allows the community to build and share reusable solutions based on common requirements. |
Without having to Eject | The Vue CLI is completely configurable without eject. This way your project can be kept up to date for a long time |
Graphical interface on the CLI | Create, develop, and manage your projects through an accompanying graphical interface |
Prototyping now | Practice new ideas instantly with a single Vue file. |
For the future | Easily produce native ES2015 code for modern browsers, or build your Vue Components as native Web Components. |
The above excellent description, from the official, manual smile.gif official website portal
Second, preparation
1. The Node/NPM installation
In order to use NPM, we must install Node first, which is nothing to say. You can download and install the corresponding system version on the portal of node. js official website.
Check whether the installation is successful
// Check node version
node -v
// Check the NPM version
npm -v
Copy the code
2. Install scaffolding @vue/cli
Note: the 3.x version package has been renamed @vue/cli
npm install -g @vue/cli
Copy the code
2. X version installation, NPM install -g vue-cli
Check whether the installation is successful:
// Check the @vue/cli version
vue -V
Copy the code
Mine is 3.11.0
Iii. Project construction
1. Initialize the project structure
vue create appName
Copy the code
Quickly and easily initialize the project structure, selecting the configuration you want to load by default. There are two modes: default, which adds Babel and ESLint configurations by default, and Manually select features, Configure Babel, VueRouter, Vuex, TypeScript, CSS pre-processors, Unit Testing, etc
To show you this, I’m going to go with default
2. Create project files and install dependencies
If configurations such as Babel, ESLint, and postCSS are not isolated during project creation, the corresponding files do not exist and the relevant configurations are stored in package.json
3. Run the project
To run the Vue project, run NPM run serve in the root directory of the project.
At this point, through a few simple operations, Vue project initialization is completed, you guys this is not very simple.
Project extension
1. Configure the VueRouter route
Note the use of vue Add, which adds the Router as a plug-in to the project
vue add router
Copy the code
Yeah, that’s it, that’s the router module configured
2. Vuex global status Manager
Same routine. Let’s go
vue add vuex
Copy the code
Yeah, that’s it. We made it
3. Axios data request
One more time. Let’s go.
vue add axios
Copy the code
Note the presence of the installed package name vuE-cli-plugin-axios in the form of a plug-in
Matters needing attention:
Vue Add is designed to install and invoke the Vue CLI plug-in. For normal NPM packages, this does not mean there is a substitute. For these generic NPM packages, you still need to use the package manager (depending on the NPM package of your choice).
4. CSS preprocessor
CSS preprocessors are used in many current projects, so how do you introduce them in @vue/ CLI 3.x? Because there is no related VUE plug-in, you need to download and install the common NPM package here. The SASS preprocessor is used as an example.
npm install sass-loader sass -D
Copy the code
Yes, install one and it supports sASS preprocessing. The built-in WebPack already does the job for you
Use sass in the.vue component
<style lang="scss">
</style>
Copy the code
Iv. Project configuration file vue.config.js
In the root directory of the project, configure vue.config.js
module.exports = {
/ / configuration items
}
Copy the code
1. Pass options to the preprocessor Loader
For example, pass in shared global variables to all SCSS files.
Assumes the SRC/assets/CSS/variables. The SCSS document
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: '@import "~@/assets/css/variables.scss"'}}}}Copy the code
Note that the official case here is incorrect and affected by the new version of sass-Loader. What needs to change is that the data field is changed to the prependData field
2. Set the externals
During development, in order to better cache files (CDN) and reduce the size of packaged files, some packages do not want to be packaged by Webpack, but they still want to be conveniently used in the project, so you can choose the externals configuration. This section uses jQuery as an example.
Public/index. The HTML into the bag
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
Copy the code
vue.config.js
module.exports = {
// configureWebpack configureWebpack
configureWebpack: {
externals: {
jQuery: 'jQuery'}}}Copy the code
SRC/components/HelloWorld. Vue using jQuery
import $ from 'jQuery'
Copy the code
Help yourself to the
3. The proxy agent
Daily development, must set up forwarding agent
module.exports = {
devServer: {
proxy: {
'/': {
target: 'http://xxoo.com'.changeOrigin: true}}}}Copy the code
With the forwarding proxy mastered, Mommy no longer worries about me and the debugging interface on the back end…
5. Auxiliary tools
1. VueDevtools
Install browser extension VueDevtools, assist Vue development, portal
Afterword.
The above is brother Hu to share the content today, like partners remember to collect, forward, click the lower right corner button to see the **, recommended to more partners, welcome a lot of message exchange…
Brother Hu has words, a technology, feelings of brother Hu! Jingdong open platform chief front-end siege lion. Talk with you about the big front end, share front-end system architecture, framework implementation principles, the latest and most efficient technology practice!
Long press scan code attention, more handsome more beautiful yo! Pay attention to Brother Hu said the public number, and Brother Hu continue to in-depth exchanges!