vue-cli + webpack project to build

The first step node.js download and install. Download: https://nodejs.org/en/download/ . Next download directly continuous .msi format it. After the installation is complete, you can view the version number with the node -v and npm -v.

 

Step download vue-cli. Input npm install -g vue-cli command line, automatically download vue-cli (will generate a lot of dependencies). You can enter vue to see if the installation was successful

 

The third step is to initialize the project and download webpack. Run vue init webpack project name project initialization

 

1) project name project name Enter point

2) project description project description, do not want to write directly enter

3) author author

4) install vue-router? Enter Y is recommended to install

5) use ESLint preset       eslintregarded as a tool to check the code syntax specification. This may be based on whether their own familiar with the installation

6) behind the two  direct N

The fourth step cd project

The fifth step npm install

Part VI npm run dev

 

Oppression "" "" ""

After entering the command, we will ask a few simple options, we have to fill their own needs it.

Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitest
Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
Author:作者,如果你有配置git的作者,他会读取。
Install  vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择Y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n(建议),如果你是大型团队开发,最好是进行配置。
setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n

介绍一下目录及其作用:

     build:最终发布的代码的存放位置。

     config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。

     node_modules:npm 加载的项目所需要的各种依赖模块。

     src:这里是我们开发的主要目录(源码),基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:

             assets:放置一些图片,如logo等

             components:目录里放的是一个个的组件文件

             router/index.js:配置路由的地方

             App.vue: Project inlet assembly (with components), we can write the component here, instead of using the components directory. The main role is to establish a definition of our own components through its contact with the page rendering, and there's <router-view /> essential.

             main.js: project core files (js entrance of the project) introducing dependencies, such as the default page style (after the formation of a project run in the index.html file app.js).

     static: static resource directory, such as images, fonts and so on.

     test: Initial test directory, delete

      .XXXX file: configuration file.

     index.html: single entry page html page, you can add some meta information with statistical code or what the style or reset the page and so on.

     package.json: Project configuration file / version information depends development kit and rely on plug-in information.

     README.md: documentation of the project.

     webpack.config.js: webpack configuration file, the file .vue packaged into browser can read the file.

     .babelrc: is the configuration file syntax detection es6

     .getignore: Ignore the configuration files (such as analog local data submitted in mock let him get / packaged on the line when not in use can be ignored in this configuration)

     .postcssrc.js: Prefix configuration 

     .eslintrc.js: Configure eslint grammar rules (configured in the inside of the rules attribute grammar rules which allow failure)

     .eslintignore: Ignore eslint check for syntax rules of certain documents project

 

Guess you like

Origin www.cnblogs.com/wjl-boke/p/11262403.html
Recommended