快速搭建的webpack+vue项目

快速搭建的 webpack+vue 项目！

参考： https://vuejs-templates.githu...

第一步：

npm install -g @vue/cli

第二步：

npm install -g @vue/cli-init

第三步：

vue init webpack  my-project

会有一系列选项，询问项目名称等，可以默认（按Enter键），也可以自定义。

等待几分钟，安装成功： # Project initialization finished!

此时一个快速搭建的 webpack+vue 项目就构建成功啦！

下面来查看一下项目结构：

tree

.
│  .babelrc
│  .editorconfig
│  .eslintignore
│  .eslintrc.js
│  .gitignore
│  .postcssrc.js
│  ii.txt
│  index.html
│  info.txt
│  package.json
│  README.md
│
├─build      # webpack config files
│      webpack.base.conf.js
│      webpack.dev.conf.js
│      webpack.prod.conf.js
│      ...
├─config
│      index.js     # main project config
│      ...
├─node_modules
├─src
│  │  App.vue       # main app component
│  │  main.js       # app entry file
│  ├─ assets        # module assets (processed by webpack)
│  │      ...
│  ├─ components    # ui components
│  │      ...
│  └─ router
│          index.js
│
├─static            # pure static assets (directly copied)
└─test
    └─e2e
        │  nightwatch.conf.js
        │  runner.js
        │
        ├─custom-assertions
        │      elementCount.js
        │
        └─specs
                test.js

第四步：进入项目文件：

cd my-project

第五步：启动项目：

npm run dev

 //Compiled successfully in 5030ms                                //20:51:54

 //I  Your application is running here: http://localhost:8080

第六步：在浏览器访问项目

http://localhost :8080

打包项目：

npm build