Vue project construction

This paper mainly introduces the methods and skills of building projects when using Vue to carry out project practice.

Build a project using the Vue CLI

Vue CLI is a complete system for rapid development based on Vue. Js. Using the Vue CLI we can quickly create a new VUe-based project.

Before using the Vue CLI to create a project, you need to install Node, NPM (YARN), and Webpack.

  1. Installing the Vue CLI:

    npm install -g @vue/cli
# OR
yarn global add @vue/cli
Copy the code

  2. Create a project

    vue create my-project
Copy the code

    The project name here cannot be capitalized.

    After running this line of code, a feature needs to be configured. Preset can be used as the default configuration provided by the CLI or can be configured manually. Of course this preset can also be configured. Different projects require different configurations. Do not blindly apply one set of configurations.

  3. Directory description

    After the project is created, different files or folders will appear depending on our configuration. The functions of some files and directories are as follows:

    | - dist # # after packaged folder | -- public static folder | | -- the favicon. Ico | | - index. The HTML # # entry page | -- SRC source directory | | | - assets # module resources | - components # vue common components | | - views | | - App. Vue # page entry file | | -- main. Js # entry documents, Load common components | | -- the router. Js # routing configuration | | - store. Js # state management. | - env. The pre - release # | - pre-release environment. Env. # production production environment. | - env. Test # test environment | - vue. Config. Js # config file. | - eslintrc. Js # ES - lint check. | - | gitignore # git ignored - Babel. Config. | - js # Babel configuration Package. Json # project basic information | -- postcss. Config. Js # CSS preprocessor (enabled by default autoprefixer)Copy the code

  4. Minor optimizations for the Vue project

    After successfully completing the above steps, a VUe-based project is almost complete. But there are a few small optimizations we can implement to make the development process easier.

    1. Adding vue snippets to the development tools makes it easy to supplement the Vue code.

    2. import alias

      • Using the import alias simplifies the calculation of relative paths. The alias already specifies a reference directory, usually a SRC directory.

      • TS/JS can import files with @, for example, import XXX from ‘@/ file path ‘.

      • In the CSS/SASS, you can import files by using ~@, for example, @import ‘~@/ File path ‘.

      • Using import alias in WebStorm requires configuration (VSCode does not) :

        Search for webpack in the search and add the configuration file to the project node_modules\@vue\cli-service\webpack.config.js. Otherwise, red wavy lines will appear when using alias.

    3. WebStorm’s quick create file template

      Search for File and Code Template in Webpack, and our preset Template will be used automatically when creating the corresponding format File.