Vue installation and environment configuration, development tools

This article mainly introduces the installation and environment configuration of Vue, creates a new vue project, and briefly introduces the vue development tools and project structure.

---

foreword

Vue front-end framework environment construction

---

1. Node.js installation and configuration

1. Download and install node.js

Download the latest version from the official website: https://nodejs.org/en/download/
You can download the installation package (see the installation tutorial: https://www.runoob.com/nodejs/nodejs-install-setup.html )
or download the zip file Find a directory to save, decompress the downloaded file, then configure the environment variable, and configure the path where the decompressed file is located into the environment variable.

Since npm is installed by default in Node.js, you can use the npm command in the global command without additional configuration. Test whether the installation is successful in cmd: Enter node -v and npm -v to view the version information respectively

2. Configure the default installation directory and cache log directory

Note: The environment configuration here mainly configures the path of the global module installed by npm, and the path of the cache cache. The reason for this configuration is that it will be executed in the future like: npm install express [-g] (the optional parameters that follow -g, g represents the meaning of global global installation), the installed modules will be installed in the path of [C:\Users\username\AppData\Roaming\npm], occupying the C disk space.
1. Create default installation directory and cache log
directory Create two folders [node_global] and [node_cache] under nodejs] as the default installation directory and cache log directory respectively.

2. Execute the command to configure npm's global module directory and cache directory to the two directories we just created:

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

npm config get prefixView npm global installation package save path
npm config get cacheView npm package cache path

You can also enter npm list -globalthe command to view the global installation directory:

npm config listView all npm configurations

3. Node.js environment configuration

Note: The following D:\Program Files\nodejs is the installation path of my node, remember to change it to your own path

"My Computer" - right click - "Properties" - "Advanced System Settings" - "Advanced" - "Environment Variables", enter the environment variables dialog box

1. Create a new [NODE_PATH] under [System Variables], and set the installation directory of third-party dependencies here.
If the global installation directory is modified following step 2, enter [D:\Program Files\nodejs\node_global\node_modules ]

2. [ Under [Path] under System Variables, add the path of node [D:\Program Files\nodejs\]

3. If the global installation directory is set, [Path] under [User Variables] will change the default APPData/Roaming\npm under C drive to [D:\Program Files\nodejs\node_global], [D:\Program Files\ nodejs\node_cache], this is the default module calling path of nodejs

4. Configure Taobao mirror source

View npm download sourcenpm config get registry

Change the module download warehouse of npm from the default foreign site to a domestic site, so that the speed of downloading modules can be faster. Now we use Taobao mirror source (https://registry.npm.taobao.org), use Taobao There are two ways to mirror source:

(1) Temporary use

npm --registry https://registry.npm.taobao.org install cluster

This code is only downloaded from Taobao mirror when installing the cluster. Every time a module is installed, it uses a long code, which is rather cumbersome, so the second method is recommended.

(2) Permanent use

There are also two configuration options, one is to directly modify the warehouse address of the npm command to Taobao mirror source, and the other is to install the cnpm command.

The first: directly modify the default configuration of npm

npm config set registry https://registry.npm.taobao.org 

Verification: After configuration, you npm config get registrycan npm config listcheck whether the npm download source is configured successfully according to the or command, as shown in the figure, before the configuration is "https://registry.npmjs.org/"

After configuration, it is a Taobao image, indicating that the configuration is successful

The second: install cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

The verification method becomes cnpm config get registryor cnpm config listas shown

---

2. Install vue and scaffolding

1. Install vue.js

npm install vue -gorcnpm install vue -g

Select the command according to your own Taobao mirror source settings, where -g is global installation, which means to install to the global global directory

View the installed vue information: npm info vueorcnpm info vue

View the installed vue version npm list vue

2. Install the webpack template

Run the command at the command line npm install webpack -gand wait for the installation to complete.

For webpack 4x and above, webpack puts all command-related content into webpack-cli,
so you also need to install webpack-cli: npm install --global webpack-cli,
you can use it to webpack -vview the version number after the installation is successful.

3. Install scaffolding vue-cli 2.x

npm install vue-cli -g

Use this command to check if the version is correct: vue --versionorvue -V

Install vue-router here

npm install -g vue-router

You can see that my installation directory is as follows

4.vue-cli2 creates a vue project

1. Create a project (it is best to cd to a certain location on the D drive, that is, the path of the project, otherwise the project will be newly created in C:\Users\Administrator\, or you can directly enter cmd in the desired project path)

 vue init webpack 项目名

The project name should not take Chinese and capital letters.

Do some configuration:

• Project name (project name): Enter (including capital letters gave me an error, I changed my-vue)
• Project description: Enter
• Author: Author name: Enter
• Vue build ==> (whether to install a compiler) runtime-compiler and runtime-only are both packaging methods, and the second one is more efficient;
• Install vue-router ==> Whether to install vue-router, the route must be used in the project, so Y press Enter;
• Use ESLint to lint your code ==> Whether you need ESLint to detect the code, we don't need it at present, so n press Enter;
• Set up unit tests ==> Whether to install the unit test tool currently we do not need so n press Enter;
• Setup e2e tests with Nightwatch ==> Do you need an end-to-end testing tool? Currently we don't need it, so n press Enter;
• Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)==> 安装依赖npm install
• Enter;

Some screenshots are omitted here
The final result is as follows, the project initialization is successful

2. Press the prompt code to enter the project directory and run it. npm run dev

Press the prompt to open the address http://localhost:8081.

End project running: ctrl+c, select Y to stop the project running.

---

3. Install vue-cli 3.x

1. Uninstall the old version

Uninstall 2.x version npm uninstall vue-cli -g
Uninstall 3.x versionnpm uninstall @vue/cli -g

2. Install the new version

npm install @vue/cli –g
Specify a version number npm install -g @vue/[email protected]If you do not specify a version number, the latest version will be installed by default

3. New project

vue create 项目名

• Please pick a preset=》Select a configuration: The default default is babel, eslint, Manually select features to configure manually.
  Choose manual configuration, choose according to your own needs, hit the space bar and the arrow keys to choose.
• where do you prefer placing config for …=” where the configuration is placed
  In dedicated config files=” each configuration has a separate file
  In package.json=” in the package.json file
• Save this as a preset for future project? => Is it to save the configuration habit file , after saving, there will be this option when you select the configuration for the next new project
• Save preset as; => save a name
• Pick the package...=> Run select npm or yarn

Configured successfully

4. Run the project

cd to our project directory, and then use http://localhost:8080/ to open npm run serveour project
to see the result of our operation, as shown in the figure

Five, cli3 pull down the 2.x template

npm install -g @vue/cli-init

It is still possible to create a new 2.x projectvue init webpack my-vue

4. Development tools

1. View vue code with VS

It is best to use coding tools to view the written code. I use vs code. For installation, see https://blog.csdn.net/dream_summer/article/details/108872293 . Here's how to use Visual Studio Code to view vue code
1. In VS code After the project is
created, first use VS to open the folder where the project is located, click Terminal on the toolbar - New Terminal, enter npm run serveStart browser will be automatically opened after the compilation is successful.

Create a new vue.config.js file in the project and change the port number to 8089

module.exports={
    
    //扩展配置
    configureWebpack:{
    
    
        devServer:{
    
    
            port:8089,//更改端口号
            open:true,//自动启动浏览器
            //mock数据
            before(app){
    
    
                
            }
        }
    }
}

After saving, start in the terminal, the port number becomes 8089 and the browser is automatically opened http://localhost:8089 as shown in the
figure

2、Hbuilder X

1. Installation Download the hbuildx installation file (provided, no need to download)
   from the HbuildX official website ( http://www.dcloud.io/hbuilderx.html ). After downloading, unzip it and use it.

2. Create a new VUE project
   

3. Node configuration (configure running permission)
   Select the newly created project and click on the toolbar to run - run to terminal - run settings
   Fill in the bottom npm, node running configuration, as shown below:
   

4. Run the project
   Select the project, right-click - external command
   1, npm run build to compile the project
   2, npm run serve to start the project
   After the startup is successful, open the path and see the following interface indicating success.
   

Five, vue project structure

1. build: build script directory
1) build.js ==> production environment build script;
2) check-versions.js ==> check npm, node.js version;
3) utils.js ==> build related tools and methods ;
4) vue-loader.conf.js ==> configure the css loader and automatically add a prefix after compiling css;
5) webpack.base.conf.js ==> webpack basic configuration;
6) webpack.dev.conf. js ==> webpack development environment configuration;
7) webpack.prod.conf.js ==> webpack production environment configuration;
2. config: project configuration
1) dev.env.js ==> development environment variables;
2) index. js ==> project configuration file;
3) prod.env.js ==> production environment variables;
3. node_modules: project dependent modules loaded by npm
4. src: here is the directory we want to develop, basically what to do are in this directory. It contains several directories and files:
1) assets: resource directory, place some pictures or public js and public css. But because they belong to the code directory, they can be manipulated and processed with webpack. Meaning you can use some preprocessing like Sass/SCSS or Stylus.
2) components: The directory used to store custom components, there will be an example component in it.
3) router: front-end routing directory, the routing path we need to configure is written in index.js;
4) App.vue: root component; this is the root node component of the Vue application, and you can learn more about Vue components by looking down.
5) main.js: The entry file of the application. It mainly introduces the vue framework, root components and routing settings, and defines the vue instance, that is, initializes the Vue application and specifies which HTML element in the index.html file to mount the application on. Usually also do some operations to register global components or add additional Vue libraries.
5, static: static resource directory, such as pictures, fonts, etc. It will not be built by webpack
6. index.html: The entry file of the home page, you can add some meta information, etc. This is the template file of the application, the Vue application will run through this HTML page, and it can also interpolate in this file using the template syntax of lodash. Note: This is not the template responsible for managing the final display of the page, but the static HTML file outside the Vue application. Generally, this file is only modified when some advanced functions are used. 7. package.json: npm package configuration file
, which defines the npm script of the project, dependent packages and other information
8. README.md: the description document of the project, markdown format
, git configuration, etc.
1) .babelrc: babel compilation parameters
2) .editorconfig: editor-related configuration, code format
3) .eslintignore: the path required or omitted for configuration, generally build, config, dist, test and other directories will be configured to ignore
4) .eslintrc.js : configure the code format style check rules
5) .gitignore: git upload the file configuration that needs to be ignored
6) .postcssrc.js : css conversion tool

Six, my vue system study notes

Vue Note 1: Vue Technology Stack

Vue Note 2: Basic Syntax