Vue quickly create project

Reprinted: https://www.jianshu.com/p/c7df292915e7

In order to facilitate project management Vue, Vue official team developed  vue-cli  tools.

This article will take you vue-cli quickly create a Vue project.

Local installation vue-cli

Global use npm install vue-cli:

cnpm install -g @vue/cli

Create a project

carried out:

vue create hello-world

It will pop up the following interface:

Here there are two options:

• default (babel, eslint)Default package, providing babel and eslint support.
• Manually select featuresThemselves to select the required function, to provide more features to choose from. For example, if you want to support TypeScript, you should choose this one.

It can be used 上下方向键to switch the option. If you only need babel and eslint support, then select the first item, get away, quietly waiting for initialization vue project.

If you want more support, they select the second item: Switch to the second item, press enter to select menu, the following interface:

vue-cli built supports eight features, multiple choice: Use the arrow keys to switch between the characteristic options, using the space bar to select the current characteristics, using a key to switch to select all, an i-key rollover option.

For each function, here to be a simple description:

• TypeScript It supports the use of TypeScript writing source code.
• Progressive Web App (PWA) Support PWA support.
• RouterSupport VUE-Router .
• VuexSupport vuex .
• CSS Pre-processors Support CSS preprocessor.
• Linter / Formatter Support code style checking and formatting.
• Unit Testing Support for unit testing.
• E2E Testing Support E2E testing.

So based on the development of common projects, taking into account the robustness of the project in principle, support this choice the following features:

Press enter to confirm the selection, the next step:

Here it is make choices in developing Vue assembly, not to use the class style of writing. To make it easier to use TypeScript, here selected Y:

 Press the enter key to enter the next step:

The meaning of this option is not to use the tool to automatically inject polyfiills babel is TypeScript code conversion. If you really do not know specifically what it means, you can not control, directly select y, the next step:

That is what we need here to support dynamic style language in which the project here offers three options:

• SCSS/SASS
• LESS
• Stylus

Here select LESS, the next step:

Unit testing tool selection, direct selection now more fire Jest, the next step:

This step is to select the location of the configuration file. For Babel, PostCSS, etc., can have its own configuration file: .babelrc, .postcssrc etc., but also can put configuration information on package.json inside. Here for the friendly support of the editor (Visual Studio Code) (the editor general default looks for configuration files in the root directory of the project), select the configuration file on the outside, choose In dedicated config files , the next step:

This is to ask if they would want the current series of options to configure saved, multiplexing when a project has been created to facilitate. For the MAC, the configuration information is stored in ~ / .vuerc inside.

I am here to choose n, and then the next step:

After the election finished, vue-cli on the contents of the previously selected to start the project initialization.

Here is a selection npm registry, then it directly in China's Taobao default image on the line.

Startup project

After the initial completion, go to the root directory of the project:

cd hello-world

Startup project:

npm run serve

Wait a minute, you can see the following interface automatically opens in a browser:

 

Package on-line

After completion of the development project, it should be packaged on the line. vue-cli command also provides packaged, carried out under the project root directory:

npm run build

执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。

实际上，在部署的时候要注意，假设静态服务器的域名是 http://static.baidu.com ，那么对应到访问 <项目根目录>/dist/index.html 的 URL 一定要是 http://static.baidu.com/index.html ，其他的静态资源以此类推。

单元测试

执行：

npm run test