Environment build
- install nodejs
npm install -g npm npm自动更新到最新版本
node -v或者npm -v 查看nodejs是否安装成功
- Configure Taobao Mirror
npm config set registry https://registry.npm.taobao.org 配置淘宝镜像
npm config get registry 查看镜像地址是否设置成功
- Install scaffolding
vue -V 查看是否存在vue版本
npm uninstall vue-cli -g 如是有的话，就用命令卸载
npm -g install [email protected] 安装脚手架
create project
- vue init webpack vue-sample. Among them, vue-sample is the project name we created. After the naming is executed, it will enter the project initialization stage.
@ Project name vue222 Set the project name, you can directly press Enter to use the default project name vue222
@ Project description A Vue.js project Set the project description, you can directly press Enter to use the default description
@Author xxxxx Set the author information, or press Enter directly to use Default value
@Runtime + Compiler: recommended solution, including running and compiling modules
@Runtime-only: only running modules, more lightweight, but templates are not allowed outside the .vue file (you need to use the render function to replace the corresponding template property setting)
@Install vue-router? (Y/n) Do you want to install vue-router? If your project is a single-page application and contains multiple subdivision pages, it is recommended to install it. If your page has only one or more unrelated pages, no installation is required.
@Use ESLint to lint your code? (Y/n) Do you use ESLint to lint your code? ESLint is a js code style management tool, which is used to unify and standardize the code style. For a scripting language like js, a well-regulated code style helps to improve the readability and organization of the code. It is recommended to use it according to personal habits .
@Set up unit tests (Y/n) Whether to install the unit test framework
@Choose to use npm or yarn (need to use npm to install the yarn command globally and set the yarn source to Taobao source) command or follow up to execute related commands to install dependencies, it is recommended to use npm .
2. The project is successfully created, cd vue222, npm run dev to run the project.
project structure
build: Provide webpack environment configuration schemes, webpack build and packaging task scripts (started by the npm run build command)
config: configuration parameters related to webpack and webpack-dev-server
node_modules: node module folder, modules installed through npm will be stored Here
src: project development folder, the code we write is basically placed here
static: static resource folder
. babelrc: babel configuration file
. editorconfig: editor configuration file
. gitignore: git ignores the file configuration file, and related files will not It will be put into the git warehouse
. postcssrc.js: postcss configuration file, used to enable related postcss plug-ins
index.html: html template file used by HtmlWebpackPlugin, used to automatically generate corresponding html template
package.json: project npm configuration File, which mainly records the basic information of the project, the referenced npm module information, the list of script commands, etc.
README.md: project description MarkDown file
Note: There are two places where the static resource files in the project can be stored, namely the static folder and the src/assets folder. The resources under these two folders are processed differently. The specific performance is:
- The files in the assets directory will be parsed into module dependencies by webpack, and only relative paths are supported. For example, in background: url(./logo.png), "./logo.png" is a relative resource path, which will be parsed by Webpack as module dependencies;
- The files in the static directory will not be processed by Webpack, they will be copied directly to the final packaging directory (default is dist/static). These files must be referenced using absolute paths, as determined by the build.assetsPublicPath and build.assetsSubDirectory configurations in the config.js file.